Faire vibrer vos utilisateurs à l'aide de l'API Web Vibration

On pourrait penser qu'accéder à certains modules matériels d'un appareil peut nécessiter le développement d'application en client lourd, comme avec Kotlin pour Android ou Swift pour iOS.

Néanmoins, il existe quelques petites pépites, finalement peu connu des développeurs Web qui peuvent vous permettre d'accéder à des fonctionnalités qui permettent d'ajouter des comportements supplémentaires et disponibles sur ces plateformes.

C'est notamment le cas de la vibration, et dans cet article, nous verrons ensemble comment faire vibrer un appareil, et quelques bonnes pratiques qui vous permettront d'éviter les erreurs ainsi que les problématiques liées au support de cette API Web.

Qu'est-ce qu'une API ?

Avant même de s'intéresser à cette API, essayons de définir ensemble ce qu'est une API.

Son acronyme signifie Application Programming Interface, pour Interface de Programmation d'Application et permet de faire communiquer deux systèmes entre eux.

Ce terme est souvent associé aux API HTTP que l'on peut être amené à utiliser au cours de la création de nos applications Web comme Stripe pour gérer ses paiements par exemple.

Cependant, il est important de ne pas associer les API HTTP aux API de manière générale, puisque ce terme peut tout à fait être associé à d'autres concepts qui ne sont absolument pas lié au protocole HTTP, comme une API Linux (ABI, Application Binary Interface) permettant d'accéder à des primitives du noyau d'un système d'exploitation GNU/Linux.

C'est pourquoi il existe des API permettant de mettre en relation le langage JavaScript (qui est utilisé par les développeurs Web) et des ressources matérielles comme le module de vibration d'un appareil mobile par exemple.

Cela s'explique simplement par le fait que le langage JavaScript est un langage de programmation. Il n'a pas pour vocation à prévoir la manière dont peut s'effectuer la communication entre le langage et un module de vibration, ou un gyroscope, ou un capteur de température par exemple.

D'ailleurs, il existe même une API Web permettant d'afficher des choses dans la console du navigateur et qui est l'API Web Console : oui, même la console fait partie des ressources externes du navigateur, et si vous cherchez attentivement dans la spécification du langage JavaScript (ECMAScript), vous vous rendrez compte qu'il n'y a pas une seule fois la mention d'une quelconque méthode log, ou d'un objet console.

API Web Vibration

Il est tout à fait naturel qu'il faille passer par un code externe nous permettant de faire vibrer notre appareil.

Il est important de comprendre que le module de vibration, par exemple, est un matériel dont le pilote est écrit en C (souvent) pour le noyau du système d'exploitation.

Il est bien entendu hors de question pour nous d'écrire une seule ligne de code dans un langage de programmation système comme le C ou le C++, néanmoins cela représenterait la seule manière théorique nous permettant de pouvoir accéder à tous les modules matériels d'un appareil mobile par exemple.

C'est pourquoi, le navigateur, en plus de prévoir une implémentation du langage ECMAScript, ou JavaScript, va prévoir des fonctions, objets et méthodes supplémentaires et disponibles d'office dans le navigateur lorsqu'on utilise le langage.

C'est notamment grâce à cela que nous sommes capables d'utiliser l'API Web Fetch, nous permettant de tirer parti des fonctionnalités réseau de l'appareil afin d'envoyer des requêtes HTTP vers un serveur distant, ou encore de manipuler un document HTML grâce à l'API Web DOM.

C'est donc de la même façon qu'il est possible de manipuler le module de vibration d'un appareil (s'il est présent) à l'aide de l'API Web Vibration. Tout fait plus de sens maintenant.

Pour pouvoir commencer dès aujourd'hui à pouvoir faire vibrer les appareils de vos clients, il suffit d'ajouter cette petite ligne de code toute simple.

window.navigator.vibrate(50);

Étant donné que tous les objets de l'objet global window sont directement exposés, il est aussi possible d'utiliser ce raccourci.

navigator.vibrate(50);

C'est grâce à la méthode vibrate de l'objet global navigator qu'il est possible de faire vibrer un appareil.

Bien entendu, si vous testez ce bout de code dans la console de votre navigateur sur cet article de blog, il ne se passera pas grand-chose (ou alors, vous disposez d'un ordinateur disposant d'un module de vibration, auquel cas, je serais curieux d'en connaître les cas d'utilisation).

L'argument attendu par la méthode vibrate peut être un entier qui correspond à la durée pendant laquelle le module de vibration est censé faire vibrer l'appareil. Cette durée est exprimée en millisecondes.

Néanmoins, pour les modèles de vibration plus complexe, par exemple une sonnerie accompagné de trois petites vibrations succinctes, il serait intéressant de pouvoir reproduire quelque chose de similaire dans un navigateur Web.

Pour cela, il est alors possible de donner en argument à la méthode vibrate un tableau d'entiers, qui vont correspondre chacun successivement à une durée de vibration, et une durée de pause entre deux vibrations.

Par exemple, si nous souhaitons faire vibrer l'appareil trois fois pendant 150 millisecondes, avec une pause entre chaque vibration de 200 millisecondes, voici le code qu'il faudrait écrire pour obtenir ce résultat.

navigator.vibrate([150, 200, 150, 200, 150]);

Support des navigateurs

Bien que cette API Web soit très simple à utiliser, elle représente néanmoins un risque à l'utilisation puisque cette API n'existait pas, il y a quelques années, et quelques navigateurs moins modernes n'implémentent toujours pas cette fonctionnalité, y compris lorsque l'appareil en question dispose bel et bien d'un module de vibration.

Il existe donc deux cas possibles.

Soit l'appareil ne dispose pas du tout d'un module de vibration, auquel cas l'appel à la méthode ne renvoie aucune erreur, mais ne fait rien du tout (logique).

Soit le navigateur ne supporte pas du tout cette API Web et dans ce cas le risque est d'appeler une méthode qui n'existe pas, et lorsque c'est le cas, une exception est levée. C'est le même comportement qui surgit lorsque vous essayez d'appeler une méthode qui n'existe pas sur un objet. Cela a pour effet de lever une exception.

Il est néanmoins possible de rajouter du code nous permettant de s'assurer du support de cette méthode.

function vibrate(pattern) {
  if ("vibrate" in navigator) {
    navigator.vibrate(pattern);
    return true;
  }

  return false;
}

Documentation

Si vous souhaitez en savoir plus, le meilleur moyen d'aller plus loin est de consulter la documentation officielle de l'API Web Vibration, sachant que nous avons vu l'essentiel puisque cette API est très simple et rapide à mettre en place sur une application Web.

Sachez tout de même que le support de cette API Web est inégal d'un navigateur Web à un autre, ainsi que d'un appareil à un autre et d'un système d'exploitation à un autre.