02 • 34 • 09 • 31 • 70
Cet article est une suite directe à l'article "Les Web API JavaScript". Pour mieux comprendre ce qui va suivre, nous vous conseillons de lire la première partie.
Les API Javascript sont un formidable moyen d’enrichir l’expérience des utilisateurs de vos applications. Cela impose des limites évidentes, notamment sur la compatibilité entre les navigateurs. Mais ces innovations sont fascinantes à découvrir et à tester.
C’est pourquoi nous allons voir ensemble 9 de ces API dans cet article.
Screen Orientation API
L’API Screen Orientation permet d’obtenir des informations et d’interagir avec l’orientation de l’écran.
Tout d’abord vous pouvez récupérer les informations sur l’orientation de l’écran avec “screen.orientation” :
- “angle” : Indique l’angle de l’orientation
- “type” : Indique le type d’orientation (“portrait-primary”, “portrait-secondary”, “landscape-primary” ou “landscape-secondary”)
Il est également possible d’y ajouter un “event listener” permettant de détecter les changements de position :
Finalement, vous avez la possibilité de bloquer l’écran de l’utilisateur dans le sens que vous souhaitez, mais également de le débloquer simplement grâce aux fonctions “lock” et “unlock” :
Vibration API
L’API vibration, comme son nom l'indique, permet de déclencher une ou des vibrations si votre appareil le permet.
Pour cela, il est possible d’utiliser la méthode “navigator.vibrate”. Celle-ci peut prendre en paramètre un nombre ou un tableau de nombres, chaque nombre exprimant un temps en millisecondes :
Si plusieurs nombres sont fournis, une valeur sur deux correspond à un temps de vibration et la seconde à un temps de pause. Par exemple, ici l’appareil vibre durant 100 ms, se stoppe 200ms puis vibre pendant 500 ms :
Il est également possible d'interrompre une vibration en cours en envoyant la valeur “0”.
Fullscreen API
Afin d’afficher un élément d’une page web en entier sur l’écran, l’API Fullscreen propose différentes fonctionnalités pour gérer cela.
Prenons l’exemple ci-dessous :
On observe avec un simple “event listener” sur “keydown” si la touche appuyée est “Enter”.
Si oui, “document.fullscreenElement” permet de voir si un élément de la page est déjà en plein écran. Si ce n’est pas le cas, nous pouvons mettre un élément en plein écran avec “requestFullscreen()”, sinon, la fonction “document.exitFullscreen()” permet de quitter le mode d’affichage en question.
Badging API
L’API Badging permet d’ajouter un petit indicateur sous la forme d’une pastille contenant un nombre à côté de l'icône du navigateur.
Pour cela, il suffit simplement d’utiliser la fonction “navigator.setAppBadge” en passant le nombre désiré à la fonction :
Pour retirer le badge, il existe la fonction “navigator.clearAppBadge()” :
Barcode Detection API
Grâce à Javascript et la Barcode Detection API, il est possible de venir lire les codes-barres présents sur une image.
Cela est rendu possible grâce à l’objet “BarcodeDetector”. Cet objet prend en paramètre une propriété facultative “formats” sur laquelle nous pouvons indiquer quel type de code sont à scanner :
Ensuite, grâce à un élément contenant une image, il est possible d’utiliser la méthode “detect” afin d’en ressortir les informations décodées, telle que “rawValue”, la valeur contenue dans le code :
Bien sûr, il est possible de venir coupler cela avec l’utilisation de l’appareil photo pour venir lire en temps réel les codes-barres présents autour de vous (voir plus bas : Media Devices API).
Contact Picker API
Grâce à l’API Contact Picker, il est possible d'ouvrir un menu contextuel permettant de récupérer les informations d’un ou plusieurs de vos contacts.
Pour cela, il est possible d’utiliser la fonction “navigator.contacts.select” avec deux paramètres :
- La liste des propriétés à récupérer
- Un objet contenant une propriété “multiple” pour savoir si un seul ou plusieurs contacts doivent être récupérés
Ainsi, il est réalisable de récupérer les informations sous la forme d’une liste d’objets :
Il peut également être utile d’utiliser la fonction “navigator.contacts.getProperties” afin de lister les propriétés supportées comme récupérable par le navigateur :
CSS Custom Highlight API
Si vous désirez surligner du texte, vous avez la possibilité grâce à l’API CSS Custom Highlight de mettre un tel système en place dynamiquement.
Tout d’abord, il y a trois étapes côté Javascript :
- Déclarer un ou plusieurs objets “Range” puis appeler les fonctions “setStart” et “setEnd” avec en paramètre respectivement le point de départ et de fin, ainsi que le node sur lequel travailler
- Créer un objet “Highlight” qui prend en paramètre l’ensemble des “Range”
- Enregistrer le “Highlight” avec un identifiant utilisable côté CSS
Et finalement, côté CSS, grâce à l'identifiant en place, il est possible d'appliquer du style aux éléments :
Page Visibility API
L’API Page Visibility permet de voir si la page est actuellement en cours de visualisation par l’utilisateur ou non (par exemple : si l’utilisateur est sur un autre onglet).
La propriété “document.visibilityState” permet de savoir si la page est visible ou non :
Il est également possible d’écouter les changements de visibilité :
Media Devices API
L’API Media Devices permet d'interagir avec les périphériques médias d’entrée comme une caméra ou un microphone.
Ainsi grâce à la fonction “getUserMedia” il est possible d’utiliser l’appareil photo ou la webcam du support afin d’afficher le flux dans un élément d’une page :
Chez Next Decision, fort de notre expérience en développement d’applications web métier, nous sommes en mesure de répondre à vos besoins de développement spécifique tout en intégrant des API Javascript modernes.
Nos développeurs Next Decision ont les compétences techniques et les environnements de travail parfaits pour répondre à vos besoins sur Javascript. Contactez-nous pour nous parler de votre projet !
