Qu'est-ce que le retour haptique ?

Le retour haptique est une réponse tactile — une petite vibration ou un tapotement — qu'un appareil produit pour confirmer une action ou attirer l'attention. Sur les smartphones, il est généré par un minuscule moteur (sur les iPhone, le « Taptic Engine » d'Apple) qui crée des impulsions courtes et précisément chronométrées. Contrairement à une longue vibration bourdonnante, les haptiques modernes sont nets et subtils, conçus pour ressembler à un clic physique plutôt qu'à une alarme.

Dans les applications iOS natives, les développeurs utilisent l'API UIFeedbackGenerator pour jouer différents motifs haptiques tels qu'un tapotement léger, un double-tapotement « succès » ou un triple-tapotement « erreur ». Pendant longtemps, la plateforme web sur iOS Safari n'avait pas d'équivalent — navigator.vibrate() était simplement ignoré sur les iPhone. La bibliothèque ios-haptics exploite un effet secondaire de l'élément <input type="checkbox" switch> (introduit dans Safari 17.4) : basculer ce commutateur déclenche le moteur haptique du système, permettant aux pages web de jouer des motifs haptiques courts à partir de JavaScript.

Description de l'outil

Le testeur iOS Haptics vous permet de déclencher des motifs de retour haptique directement depuis votre navigateur pour vérifier si votre appareil et votre version du système d'exploitation les supportent. Il expose les trois motifs fournis par la bibliothèque ios-haptics — un simple tapotement, une « confirmation » (deux tapotements rapides) et une « erreur » (trois tapotements rapides) — et inclut également un bouton qui appelle l'API standard navigator.vibrate() comme solution de secours pour Android et autres appareils.

Exemples

Action Sensation attendue sur iPhone (iOS 17.4–26.4) Sensation attendue sur Android
Haptique simple Un tapotement court et net Une vibration courte (~200 ms)
Confirmation (deux haptiques rapides) Deux tapotements rapides successifs Deux vibrations courtes
Erreur (trois haptiques rapides) Trois tapotements rapides successifs Trois vibrations courtes
Test navigator.vibrate() Rien sur la plupart des versions iOS Une vibration d'environ 200 ms

Fonctionnalités

  • Boutons à un clic pour les motifs haptiques simples, de confirmation et d'erreur
  • Détection automatique du support haptique sur l'appareil actuel
  • Test de solution de secours intégré pour l'API Web standard navigator.vibrate()
  • Journal d'événements en direct avec horodatages pour chaque motif déclenché
  • Bannières d'état claires expliquant la compatibilité des versions iOS

Cas d'usage

  • Développeurs web vérifiant que le retour haptique fonctionne sur un vrai iPhone avant d'intégrer ios-haptics dans leur propre site ou PWA
  • Ingénieurs QA vérifiant comment les mêmes motifs se ressentent sur différents appareils, versions du système d'exploitation et navigateurs
  • Utilisateurs curieux qui veulent expérimenter la différence entre le retour « Taptic » de style iOS et l'impulsion navigator.vibrate() plus longue d'Android

Comment ça marche

Sur iOS Safari, l'outil crée dynamiquement un <input type="checkbox" switch> caché, le bascule, puis le supprime du DOM. L'action de basculer ce commutateur natif est ce qui déclenche le Taptic Engine — il n'existe pas d'API Web publique qui le fait directement. Les motifs « confirmation » et « erreur » répètent simplement le basculement deux ou trois fois en succession rapide.

Sur les appareils qui ne supportent pas l'astuce du commutateur iOS, la bibliothèque revient à navigator.vibrate(), qui est largement supporté sur les navigateurs Android. Le bouton « Test navigator.vibrate() » dans cet outil appelle cette API directement afin que vous puissiez comparer les deux mécanismes.

Options expliquées

  • Haptique simple — Joue un tapotement court. À utiliser de préférence pour confirmer une petite interaction telle qu'un commutateur ou un champ de formulaire réussi.
  • Confirmation (deux haptiques rapides) — Joue deux tapotements rapides. Idéal pour « enregistré », « envoyé » ou autres confirmations positives.
  • Erreur (trois haptiques rapides) — Joue trois tapotements rapides. À utiliser pour signaler les erreurs de validation ou les défaillances destructrices.
  • Test navigator.vibrate() — Appelle l'API Web Vibration avec une durée de 200 ms. Utile pour confirmer le support des appareils non-iOS et pour comparer la sensation avec les motifs iOS.
  • Effacer le journal — Supprime toutes les entrées du journal d'événements.

Limitations

  • Les haptiques iOS programmatiques ne fonctionnent que sur iOS 17.4 à 26.4. Apple a corrigé le comportement sous-jacent dans iOS 26.5, donc appeler ces motifs à partir de JavaScript ne déclenche plus le Taptic Engine sur les dernières versions iOS. L'interaction directe de l'utilisateur avec un vrai <input type="checkbox" switch> fonctionne toujours.
  • iOS Safari ignore navigator.vibrate() sur pratiquement toutes les versions, donc le bouton de secours apparaîtra silencieux sur les iPhone.
  • Les navigateurs de bureau ne peuvent pas produire de retour haptique ; les boutons s'exécuteront mais vous ne sentirez rien.
  • Certains navigateurs Android exigent que la page soit au premier plan et un geste utilisateur avant que navigator.vibrate() ne se déclenche.
  • Le retour haptique peut également être désactivé dans les paramètres système de l'appareil (par exemple, Paramètres → Sons et haptiques → Haptiques système sur iOS).

Conseils

  • Testez sur un appareil réel, pas un simulateur ou émulateur — les appareils virtuels n'ont pas de Taptic Engine.
  • Si rien ne se passe sur iPhone, vérifiez que les Haptiques système sont activées dans Paramètres et que le mode Silencieux ne les supprime pas sur les anciennes versions iOS.
  • Utilisez le motif Confirmation avec parcimonie ; l'utilisation excessive d'haptiques rapides devient rapidement ennuyeuse.
  • Combinez les haptiques avec un retour visuel — un haptique seul est rarement suffisant pour communiquer l'état à l'utilisateur.

FAQ

Pourquoi ne sens-je rien sur mon iPhone ? Vous êtes probablement sur iOS 26.5 ou plus récent, où Apple a corrigé la technique utilisée par cette bibliothèque. Essayez un appareil exécutant iOS 17.4–26.4, ou vérifiez que les haptiques système sont activées dans Paramètres.

Pourquoi navigator.vibrate() ne fonctionne-t-il pas sur iPhone ? Apple n'a jamais implémenté l'API Web Vibration dans iOS Safari. Il n'existe actuellement aucun moyen standardisé de déclencher la vibration sur iOS à partir d'une page web.

Est-ce sûr à utiliser en production ? La bibliothèque est petite et sans effet secondaire, mais parce qu'elle repose sur une particularité d'un élément HTML spécifique, elle peut se casser lors de toute mise à jour iOS future — comme cela s'est déjà produit dans iOS 26.5. Traitez toujours le retour haptique comme une amélioration progressive, jamais comme une exigence.

Fonctionne-t-il dans une PWA ou une application « Ajouter à l'écran d'accueil » ? Oui, sur les versions iOS supportées, la même technique fonctionne dans les applications web installées tout comme dans Safari.