02 • 34 • 09 • 31 • 70
Les navigateurs possèdent tout un tas de petites fonctionnalités qui permettent d'interagir avec l’environnement du device, et ce, grâce à Javascript.
Il est par exemple possible de récupérer des informations de l’état de la connexion internet, d’envoyer des notifications push, détecter le niveau de batterie, etc. Le tout est généralement accessible grâce à de simples petites (mais puissantes) fonctions exposées par Javascript.
Bien souvent, certaines de ces API sont expérimentales et ne sont pas totalement implémentées à travers tous les navigateurs du marché. C’est pourquoi il est important de vérifier la compatibilité sur les sites “MDN” ou “Can I Use” avant de se lancer tête baissée sur une implémentation.
Nous vous proposons ici un aperçu (non exhaustif) en passant en revue 8 API que nous avons sélectionnées.
À noter : Même si nous ne le préciserons pas à chaque fois, pour des raisons de sécurité certaines de ces API ne fonctionnent qu'après une interaction par l’utilisateur. Par exemple, l’API Share peut être exécutée via un callback lors du clic sur un bouton.
Clipboard API
L'API Clipboard permet d'interagir à plusieurs niveaux avec le presse-papiers : couper, copier et coller ; et donc également lire et écrire dans ce presse-papiers.
Le navigateur expose un objet “clipboard” dans la variable globale “navigator”, qui contient plusieurs fonctions.
Pour ajouter du texte dans le presse-papiers (qui pourra donc être “collé” par l’utilisateur), il suffit d’appeler la fonction “writeText” en passant en argument le texte que vous voulez “copier” :
À l’inverse, vous pouvez également lire le contenu qui a été “copié” par un utilisateur via la fonction “readText” :
Share API
L'API Share fournit des fonctions permettant de partager du texte et/ou des fichiers vers une cible de partage (une autre application par exemple) qui serait sélectionnée par l'utilisateur. Cette API permet d’ouvrir l’interface de partage en place sur votre device.
Vous pouvez commencer par initialiser les donnés à partager sous cette forme :
Ensuite, la fonction “canShare” permet de valider le contenu avant de le partager :
Finalement, vous pourrez partager vos données avec la fonction “share” :
Screen Wake Lock API
L'API Screen Wake Lock permet d'empêcher les appareils d'assombrir ou de verrouiller l'écran (de passer en veille donc) lorsqu'une application doit continuer à fonctionner. Cela signifie que si votre appareil est configuré pour passer en veille au bout de 30 secondes, cette API vous permet de garder l’écran actif au-delà de ces 30 secondes.
Pour activer cette API, il suffit d’appeler la fonction “request” de l'objet “wakeLock” :
Si vous voulez désactiver le wakeLock précédemment initialisé, il faut alors appeler la fonction “release” :
Battery Status API
L'API Battery Status permet d'obtenir des informations sur le niveau de charge de la batterie du système, mais également d’écouter les changements de statut ou de niveau de batterie pour réagir en conséquence.
Vous pouvez récupérer l’état de la batterie avec la fonction “getBattery” qui vous retourne tout un tas d’informations :
- “charging” : Booléen indiquant si la batterie est en cours de chargement
- “chargingTime” : Nombre représentant le temps avant que la batterie ne soit complètement chargée
- “dischargingTime” : Nombre représentant le temps avant que la batterie ne soit complètement déchargée
- “level” : Niveau de batterie entre 0 et 1
Vous pouvez également ajouter des “event listener” afin d’écouter les changements de la batterie :
Idle Detection API
L'API Idle Detection permet de détecter l'état d'inactivité d’un utilisateur (actif ou inactif) et de son écran (verrouillé ou déverrouillé), et d'écouter les modifications apportées à cet état d'inactivité.
Pour accéder à cette API, l’utilisateur doit avoir autorisé son utilisation :
Ensuite, il suffit de créer une nouvelle instance de “IdleDetector” puis d’écouter l'événement “change” pour récupérer les nouveaux états :
Network Information API
L'API Network Information permet d’obtenir des informations sur la connexion du système : type de connexion (wifi, cellulaire, etc.), vitesse du débit, etc.
Vous pouvez récupérer les informations dans l'objet “connection” :
- “downlink” : Débit de la bande passante estimé
- “effectiveType” : Type de connexion internet estimé (“slow-2g”, “2g”, “3g”, ou “4g”)
- “rtt” : Le “round-trip time” estimé
- “saveData” : “true” si l’utilisateur à un mode de réduction de données activé (basé sur le “user agent”)
Geolocation API
La Geolocation API permet d’obtenir la localisation de l’utilisateur de l’application web : coordonnées GPS, précisions de ses coordonnées et la date de cette dernière position GPS connue.
La fonction “getCurrentPosition” de l’objet “geolocation” permet de retourner, via son premier paramètre (un callback), les informations sur la position GPS dont la latitude et la longitude. Bien sûr, lorsque vous exécutez cette fonction, il sera demandé à l’utilisateur de valider qu’il souhaite partager sa localisation avec le navigateur.
Broadcast Channel API
La Broadcast Channel API permet à différents contextes d’un navigateur (pourtant distincts) de pouvoir communiquer entre eux : les fenêtres, les onglets, les workers ou encore les iframes.
L’idée est d’ouvrir un tunnel commun pour que chaque contexte qui y est connecté puisse envoyer des messages et écouter la potentielle arrivée d’autres messages.
Un nouveau tunnel s’ouvre avec une nouvelle instance de l'objet “BroadcastChannel” en lui fournissant un identifiant de chanel, un message peut ensuite y être envoyé :
D’un autre coté, l'événement peut être écouté et traité :
Si le canal ouvert n’est plus utile, il est possible de le fermer :
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 et échangeons sur votre projet !
