Share
HTML5 a été une bouffée d’air frais pour le Web, qui n’a pas seulement affecté le Web tel que nous le connaissons. HTML5 fournit un certain nombre d'API permettant aux développeurs de créer des sites Web interactifs et d'améliorer l'expérience des utilisateurs sur les appareils mobiles. Dans cet article, nous allons examiner de plus près l’API Vibration..
Vous souvenez-vous de la première introduction de la PlayStation dans les années 90? Si vous le faites, vous pouvez également vous rappeler qu’une petite révolution a été créée avec l’introduction du DualShock, un contrôleur introduisant le retour d’information par vibration. C'était un formidable succès.
Tous mes amis possédant une console PlayStation basculent presque immédiatement vers le DualShock et je ne faisais pas exception. Pourquoi a-t-il eu un tel succès? Le facteur clé de son succès a été sa capacité à fournir des commentaires au joueur sous forme de vibrations, cela vous a permis de vous sentir plus connecté au jeu comme si vous étiez dans le jeu.
Le DualShock n'était que le début de cette tendance. Les contrôleurs sont devenus beaucoup plus avancés avec le Kinect et des produits révolutionnaires, tels que l'Oculus Rift et l'incroyablement populaire Omni.
Le Web est devenu beaucoup plus puissant et le développement de jeux s’est déplacé sur le Web. Jusqu'à il y a quelques années, les jeux pour le Web reposaient sur Flash et Silverlight. Aujourd'hui, toutefois, ces technologies ne sont plus nécessaires pour développer des jeux pour le Web, en grande partie grâce au HTML5.
Avec une puissance accrue, une responsabilité accrue Pour le Web, cela signifie qu'il est nécessaire d'avoir des API bien définies qui permettent de créer une meilleure expérience utilisateur et de tirer parti des nouvelles technologies disponibles, par exemple, sur les appareils mobiles. Une telle API est l'API Vibration.
L'API de vibration a été conçue pour traiter les cas d'utilisation dans lesquels un retour tactile est nécessaire ou souhaité. Pratiquement tous les appareils mobiles modernes modernes ont la capacité de vibrer. L'API de vibration offre la possibilité d'accéder par programme aux capacités de vibration du périphérique et de les utiliser. L'API n'est pas destiné à être utilisé comme mécanisme de notification générique, car l'API de notifications Web a été créée à cette fin. Bien que l'API Vibration soit une recommandation candidate du W3C pour le moment, les spécifications n'ont pas changé depuis plusieurs mois, ce qui indique que la spécification pour atteindre le stade final, la recommandation du W3C, va bientôt.
Comme avec les applications mobiles natives, les possibilités de l'API Vibration sont infinies. Vous pouvez l'utiliser pendant la lecture d'une vidéo afin que l'appareil vibre lors d'une explosion. Les jeux sont un autre excellent choix pour l'API Vibration. Les jeux utilisent déjà largement les capacités matérielles des appareils mobiles et l’API Vibration est donc un choix judicieux pour les jeux Web. Rappelez-vous simplement pourquoi le DualShock est devenu si populaire et vous comprendrez ce que je veux dire.
Maintenant que nous savons ce que l’API de vibration peut faire pour nous, voyons comment nous pouvons l’utiliser. Permettez-moi de commencer par quelques bonnes nouvelles, l'API est très facile à utiliser - presque triviale. Il n'y a qu'une seule méthode à connaître, vibrer. C'est tout. le vibrer la méthode appartient à la la fenêtrede navigateur. le vibrer méthode accepte un paramètre, qui peut être un entier ou un tableau d'entiers.
Si un seul entier est passé à la vibrer méthode, l'appareil vibre pendant la durée de l'entier en millisecondes. Si vous passez un tableau de nombres, un modèle de vibration est défini. Les nombres entiers situés à des index impairs indiquent au périphérique le temps de vibration pendant que les nombres entiers ajoutent des index pairs, indiquant la durée entre les pauses. Pour arrêter l'appareil de vibrer, vous pouvez passer 0 à vibrer ou invoquer la méthode sans aucun paramètre.
Une image vaut mille mots, mais pour les développeurs, un extrait de code vaut probablement un milliard de mots. Voyons quelques exemples.
Pour détecter si le navigateur du périphérique prend en charge l'API de vibration, vous pouvez effectuer une vérification simple, comme indiqué ci-dessous..
if (window.navigator && window.navigator.vibrate) // Secouez ce périphérique! else // non pris en charge
Une autre option consiste à inspecter le navigateur objet.
Accentsconagua
if ('vibrer' dans le navigateur) // Secouez ce périphérique! else // non pris en charge Pour que l’appareil vibre, nous invoquons le vibrer méthode et passez un entier. Par exemple, pour indiquer à l'appareil de vibrer pendant une seconde, procédez comme suit:
// Vibrer une fois pendant 1 seconde navigator.vibrate (1000);
Pour indiquer à l'appareil de vibrer plusieurs fois avec une pause entre chaque vibration, nous transmettons un tableau d'entiers au vibrer méthode. Si nous voulons que l'appareil vibre deux fois avec une pause d'une demi-seconde et se termine avec une vibration de deux secondes, nous procédons comme suit:
// Vibrer trois fois // Les deux premières vibrations durent une seconde // Les dernières vibrations durent deux secondes // Les pauses sont d'une demi-seconde navigator.vibrate ([1000, 500, 1000, 500, 2000]);
Pour empêcher l’appareil de vibrer, nous passons le vibrer méthode 0 ou un tableau vide.
// Arrête de vibrer navigator.vibrate (0);
Ou:
// Arrête de vibrer navigator.vibrate ([]);
La prise en charge de l’API de vibration est relativement bonne dans les navigateurs de bureau et mobiles. Les principaux navigateurs qui ne prennent pas actuellement en charge l’API sont Internet Explorer et Safari. Jetez un coup d'œil à ce résumé pour avoir une idée des navigateurs supportant l'API..
-moz préfixe. Il n’existe pas de véritable polyfill pour l’API de vibration. Cependant, il existe un polyfill qui cible Firefox OS. Il a été créé par Christian Heilmann et s'appelle mozVibrate-polyfill. Vous pouvez le trouver sur GitHub.
J'aimerais terminer ce tutoriel par une simple démonstration de l'API Vibration. Il s’agit d’une simple page HTML5 contenant trois boutons, un pour vibrer une fois, un pour vibrer de manière répétée et un bouton pour arrêter de vibrer. La démo détecte si le navigateur prend en charge l'API. Dans le cas contraire, le message "API non prise en charge" s'affiche et les boutons sont désactivés. Je recommande de tester la démo sur un appareil mobile.
Demo API Vibration par Aurelio De Rosa API de vibration
API non prise en charge Démo créée par Aurelio De Rosa (@AurelioDeRosa)
Dans cet article, nous avons appris comment utiliser l’API Vibration, comment l’utiliser et quand. Comme nous l'avons vu précédemment, l'API est très simple à utiliser et nous offre un moyen élégant d'améliorer l'expérience utilisateur sur les appareils mobiles, notamment pour les films et les jeux. L'API de vibration est assez bien prise en charge sur les navigateurs de bureau et mobiles, donc rien ne vous empêche de l'utiliser aujourd'hui..
