00:00:00Je viens de tomber sur une bibliothèque vraiment cool qui ajoute un petit détail génial à vos sites,
00:00:04un truc dont je ne savais même pas que j'avais envie jusqu'à maintenant.
00:00:07WebHaptics fait exactement ce qu'il promet et permet à vos sites web d'utiliser
00:00:11le retour haptique, que ce soit sur Android ou iOS, ce qui leur donne vraiment l'aspect
00:00:15d'une application native. Et il le fait de manière très propre et simple : c'est littéralement
00:00:20une seule fonction.
00:00:21Et il s'avère que je ne suis pas le seul à trouver ça génial, ça a tourné partout
00:00:24sur Twitter et apparemment Polymarket a déjà implémenté ce package.
00:00:29Alors plongeons dans le vif du sujet pour voir d'où vient tout cet engouement et parlons
00:00:33du fonctionnement, car la bibliothèque utilise une astuce très cool pour marcher sur iOS.
00:00:43Évidemment, c'est assez difficile pour moi de vous montrer exactement ce que fait ce package,
00:00:46puisqu'il s'agit d'une vibration physique de votre téléphone, mais c'est le même type de sensation
00:00:50que lorsque vous cliquez sur s'abonner dans l'application YouTube. Mais si vous l'êtes déjà
00:00:54et que vous voulez quand même tester, le site WebHaptics est un endroit super sympa pour le faire.
00:00:59Après avoir regardé la vidéo, je vous recommande vivement d'y aller car il montre les haptiques courants,
00:01:02comme pour un succès, une erreur, et bien sûr le clic sur un bouton.
00:01:06Il y a aussi un éditeur super cool pour créer vos propres motifs haptiques, nous y reviendrons
00:01:10dans un instant.
00:01:11Pour l'instant, passons au code. Comme vous pouvez le voir, c'est un package npm très simple,
00:01:15et il dispose même de helpers pour React, Vue et Svelte. Mais vous pouvez toujours utiliser
00:01:19la variante JavaScript vanilla si vous préférez, et cette fonction trigger sera la même
00:01:23pour toutes ces versions.
00:01:24Dans mon cas, j'utiliserai React. Vous voyez que le code est incroyablement simple : tout ce qu'on fait,
00:01:28c'est utiliser le hook useWebHaptics, qui nous donne une fonction trigger que nous pouvons
00:01:32ensuite lier à quelque chose comme un bouton pour déclencher un retour haptique.
00:01:36On peut aussi voir que ce hook nous donne une fonction cancel, qui annulera
00:01:39tout retour haptique en cours, ainsi qu'un booléen isSupported pour vérifier
00:01:44si le navigateur supporte les haptiques.
00:01:45Avec ce code simple, cela signifie que lorsque je clique sur ce bouton sur un appareil Android
00:01:48ou iOS, il y aura une petite vibration. Mais comme je suis sur un ordinateur portable pour l'instant,
00:01:53il ne va rien se passer.
00:01:54Il y a cependant un petit moyen de savoir que cela fonctionne pendant le développement,
00:01:57c'est de régler debug sur true à l'intérieur du hook ici. Cela signifie que
00:02:00lorsque je clique sur le bouton, un son sera joué pour simuler ce qu'est
00:02:04le retour haptique.
00:02:05Pour ce qui est de la personnalisation du motif de vibration, c'est aussi super simple et on peut
00:02:09le faire dans la fonction trigger.
00:02:10La première méthode consiste à utiliser des préréglages inclus dans le package. Vous pouvez
00:02:14importer defaultPatterns, où vous trouverez des presets comme buzz, error, heavy et
00:02:18plein d'autres. Vous pouvez d'ailleurs avoir un aperçu de leur rendu sur le site web
00:02:21également.
00:02:22La deuxième méthode s'utilise quand vous voulez un motif de vibration complètement personnalisé.
00:02:25Il suffit de fournir un tableau à la fonction trigger pour y définir vos vibrations.
00:02:29Actuellement, j'ai quatre vibrations dans ce motif. Vous voyez qu'on définit une vibration
00:02:33avec un objet contenant un délai (le temps depuis la dernière vibration
00:02:37en millisecondes), puis une durée en millisecondes pour indiquer combien de temps elle dure,
00:02:41et enfin une valeur d'intensité où 1 représente la vibration la plus forte.
00:02:46Avec ce motif, quand je clique sur le bouton, vous pouvez entendre à quoi cela ressemblera,
00:02:49mais imaginez bien sûr que cela vibrera sur le téléphone de l'utilisateur.
00:02:53Une bonne astuce pour créer des motifs personnalisés est d'utiliser le site web car il possède
00:02:57cet éditeur très sympa. Vous pouvez cliquer pour ajouter une nouvelle vibration au tableau,
00:03:02faire glisser pour changer sa durée ou son intensité, et aussi cliquer sur play
00:03:06pour entendre le résultat. Vous pouvez aussi l'utiliser sur un téléphone pour tester
00:03:09réellement la sensation.
00:03:11Comme je l'ai dit, c'est un peu difficile à montrer en vidéo, mais j'espère que vous saisissez l'idée.
00:03:14C'est une bibliothèque assez simple, mais je veux maintenant vous montrer comment ça marche,
00:03:19car iOS n'a pas facilité les choses.
00:03:21La première chose à savoir, c'est qu'il existe une API censée exposer la fonction de vibration
00:03:24de votre téléphone via un simple navigator.vibrate.
00:03:27Le problème est que cela fonctionne très bien sur Android, mais iOS n'a absolument aucun support pour cela.
00:03:32Heureusement, il existe un autre moyen d'obtenir un retour haptique sur iOS : utiliser
00:03:36un input de type switch. Quand l'utilisateur clique dessus sur iOS, il y a un retour haptique.
00:03:41Ce que fait cette bibliothèque pour en tirer profit, c'est que lorsqu'on déclenche notre haptique,
00:03:44elle clique essentiellement sur un interrupteur invisible pour nous, mimant notre motif de vibration.
00:03:49On le voit ici avec cette case à cocher : quand je déclenche l'haptique, elle s'active
00:03:53et se désactive plusieurs fois, simulant le switch sur iOS.
00:03:56Si vous voulez voir ce switch vous-même pendant le débogage de votre application,
00:03:59il vous suffit d'ajouter l'option showSwitch à true dans les réglages du hook.
00:04:03Si nous jetons un œil rapide au code de la bibliothèque elle-même, on voit ce qu'elle fait.
00:04:06Si WebHaptics est supporté, la fonction navigator.vibrate est simplement utilisée pour jouer
00:04:11notre motif de vibration. Cependant, si ce n'est pas supporté, elle va cliquer
00:04:15sur ce switch. On a aussi cette fonction ici qui est responsable de la création réelle
00:04:19du motif de vibration en cliquant sur ce switch plusieurs fois, comme on le voit en bas.
00:04:23Je trouvais que c'était une solution de contournement vraiment ingénieuse qui valait le coup d'être montrée.
00:04:27J'espère qu'Apple ne trouvera pas de moyen de bloquer ça, ou du moins que s'ils le font,
00:04:31ils ajouteront le support pour la fonction vibrate.
00:04:32C'est à peu près tout pour cette bibliothèque. Dites-moi dans les commentaires si c'est
00:04:35quelque chose que vous utiliseriez. Profitez-en pour vous abonner, et comme toujours,
00:04:38on se voit dans la prochaine.
00:04:41[Musique]