API Vibration JavaScript

Introduction à l'API Vibration

L'API Vibration permet aux pages web d'activer le moteur de vibration d'un appareil, offrant aux utilisateurs un retour haptique (basé sur le toucher). Elle est destinée aux téléphones mobiles et tablettes qui vibrent physiquement — sur un ordinateur de bureau sans moteur, les appels réussissent silencieusement sans rien faire.

L'ensemble de l'API se résume à une seule méthode, navigator.vibrate(). Il n'y a ni invite de permission, ni événement à écouter : vous l'appelez, et l'appareil vibre. La contrepartie est que les navigateurs restreignent quand vous pouvez l'appeler, ce que ce chapitre explique en détail.

Cette page couvre les deux formes d'arguments de la méthode, comment arrêter une vibration, la détection de fonctionnalités, les limitations liées au geste utilisateur et aux appareils mobiles, ainsi que l'utilisation judicieuse des vibrations.

La méthode navigator.vibrate()

navigator.vibrate() accepte l'un de ces deux types d'arguments :

• Un nombre unique — vibrer une seule fois pendant ce nombre de millisecondes.
• Un array de nombres — un motif alternant durées de vibration et de pause.

Elle retourne un boolean : true si la requête a été acceptée, false si elle a été rejetée (par exemple, lorsqu'aucun geste utilisateur n'a eu lieu). Sur les appareils sans moteur, la méthode retourne tout de même true mais ne produit aucune vibration.

// Single vibration for 500 milliseconds
navigator.vibrate(500);

Motifs de vibration

Lorsque vous passez un array, les nombres sont lus comme vibrer, pause, vibrer, pause, …. Les entrées d'index impair sont des silences.

// Vibrate 200 ms, pause 100 ms, vibrate 400 ms
navigator.vibrate([200, 100, 400]);

// "Morse"-like triple buzz: buzz, gap, buzz, gap, buzz
navigator.vibrate([100, 50, 100, 50, 100]);

Une pause en fin de motif n'a aucun effet, car il n'y a rien après elle à faire vibrer.

Arrêter une vibration

Un nouvel appel remplace toute vibration déjà en cours. Pour en annuler une immédiatement, passez 0 ou un array vide :

navigator.vibrate(0);   // stop immediately
navigator.vibrate([]);  // also stops — equivalent to 0

C'est utile pour réinitialiser le retour lorsqu'un utilisateur rejette une alerte ou navigue ailleurs.

Détection de fonctionnalité

navigator.vibrate est undefined dans les navigateurs non pris en charge, donc l'appeler directement provoquerait une erreur. Protégez chaque appel :

function buzz(pattern) {
  if ('vibrate' in navigator) {
    return navigator.vibrate(pattern);
  }
  return false; // API not available — fall back to a visual cue
}

buzz(200);
buzz([100, 50, 100]);

Vous pouvez exécuter la détection n'importe où — y compris dans Node ou un navigateur de bureau — même si la vibration réelle ne se produit que sur le matériel compatible.

Applications pratiques

Comprendre comment intégrer efficacement l'API Vibration dans des applications web peut considérablement améliorer l'engagement et la satisfaction des utilisateurs. Voici des exemples d'applications pratiques illustrant la polyvalence de l'API Vibration.

Retour sur les actions utilisateur

Une courte vibration confirme un appui sur les appareils où l'utilisateur ne peut pas toujours voir l'écran réagir. Notez que le gestionnaire de clic lui-même est le geste utilisateur, donc l'appel est autorisé :

document.getElementById('button').addEventListener('click', () => {
  if ('vibrate' in navigator) {
    navigator.vibrate(100); // brief confirmation buzz
  }
});

Alertes de notification

Lorsqu'un signal sonore ou visuel pourrait être manqué ou inapproprié (mode silencieux, accessibilité), un motif distinctif peut le remplacer :

function alertUser() {
  if ('vibrate' in navigator) {
    navigator.vibrate([500, 200, 500]); // buzz, pause, buzz
  }
}

Amélioration des expériences de jeu

Dans les jeux web, la vibration ajoute un retour physique aux moments clés — mais seulement si le moment suit une saisie utilisateur récente, sinon l'appel sera ignoré :

function gameOver() {
  if ('vibrate' in navigator) {
    navigator.vibrate(1000); // one long buzz signals game over
  }
}

Limitations à prendre en compte

L'API Vibration semble simple, mais les navigateurs l'enveloppent de restrictions qui font qu'elle « ne fait rien » silencieusement :

• Pratiquement réservée aux mobiles. La vibration nécessite un moteur matériel. Les navigateurs de bureau soit ne disposent pas de la méthode (Safari, Firefox sur bureau), soit acceptent l'appel sans vibrer. Traitez la vibration comme une amélioration, jamais comme le seul retour.
• Nécessite un geste utilisateur. Les navigateurs modernes ignorent navigator.vibrate() sauf si elle s'exécute en réponse à une vraie interaction (appui, clic ou pression de touche). Une vibration déclenchée au chargement de la page, depuis un setTimeout, ou depuis un événement en arrière-plan est silencieusement ignorée — la méthode retourne false. Déclenchez la vibration directement dans un gestionnaire d'événements.
• Pas de permission, pas de canal de retour. Il n'y a ni invite ni événement d'erreur ; un appel rejeté retourne simplement false. Vérifiez cette valeur de retour si vous avez besoin de savoir si cela a fonctionné.
• Les onglets masqués sont bloqués. Si la page n'est pas visible (onglet en arrière-plan), la requête est ignorée.
• Les motifs sont limités. Les navigateurs limitent la durée totale maximale et le nombre d'entrées dans un motif ; les vibrations extrêmement longues sont tronquées.

Bonnes pratiques et considérations

Bien que l'API Vibration ouvre de nouvelles perspectives pour l'engagement des utilisateurs, son implémentation doit être abordée en tenant compte de l'expérience utilisateur.

• Respecter les préférences des utilisateurs : Proposez toujours une option permettant aux utilisateurs de désactiver le retour par vibration, pour ceux qui pourraient le trouver intrusif ou avoir des préoccupations d'accessibilité.
• Consommation de batterie : Soyez attentif à l'impact potentiel sur la durée de vie de la batterie de l'appareil, en particulier avec une utilisation intensive de motifs ou de longues vibrations.
• Tester sur plusieurs appareils : L'intensité des vibrations et la perception des motifs peuvent varier considérablement d'un appareil à l'autre. Les tests sur différents appareils garantissent une expérience utilisateur cohérente.
• Compatibilité des navigateurs : L'API Vibration est principalement prise en charge par les navigateurs mobiles (Chrome, Firefox, Edge). Elle n'est pas prise en charge dans Safari ni dans la plupart des navigateurs de bureau. Vérifiez toujours la prise en charge avant l'implémentation.

Conclusion

L'API Vibration de JavaScript offre un moyen pratique d'engager les utilisateurs par un retour tactile avec une seule méthode, navigator.vibrate(). Retenez l'essentiel : détectez la fonctionnalité avant d'appeler, déclenchez uniquement depuis des gestes utilisateur, privilégiez le mobile, et associez toujours les retours haptiques à un retour visuel ou sonore pour ne rien perdre sur les appareils non pris en charge.

Pour continuer à explorer les API de navigateur sensibles aux appareils, consultez l'API Screen Orientation pour réagir aux changements portrait/paysage, l'API Geolocation pour les données de localisation, et Environnement navigateur, spécifications pour comprendre comment navigator et les autres objets hôtes s'articulent.

Pratique