Brm, Brm !
L'interaction avec l'utilisateur à un niveau "sensuel" peut grandement améliorer l'expérience utilisateur de votre application. En règle générale, en tant que développeurs, nous devons nous limiter à des animations sophistiquées, telles que des effets de parallaxe ou des rendus 3D pour transmettre une impression plus réaliste à l'intérieur de nos applications. Mais saviez-vous que les Progressive Web Apps peuvent offrir bien plus ? Aujourd'hui, nous allons aborder le côté haptique des interactions entre le web et l'utilisateur.
Rumble dans la (dev-)jungle
Au moment de la rédaction, tous les environnements ne prennent pas en charge la nouvelle API Vibration. Plus précisément, chaque navigateur Chromium et Firefox peut être utilisé, alors que chaque variante de Safari/WebKit n'a pas de support. Remarque : chaque navigateur sur iOS utilise WebKit comme moteur.
L'utilisation de l'API elle-même est aussi simple que possible. Voici un exemple :
// All examples assume that we have
// access to the 'window' and use Typescript.
// Specifically, we're using optional chaining
// for simplified handling of undefined if no
// API is available.
const vibrateOnceOnClick = () => {
// A simple one-liner is all that's needed.
// To use a single vibration, we simple
// provide an integer representing the ms
// a single pulse should last.
window.navigator?.vibrate?.(200);
}
const vibratePatternOnClick = () => {
// For more than one puse, an array has to be
// provided, again defining each pulse's lenght
// in milliseconds.
window.navigator?.vibrate?.([50, 200, 50, 200]);
}
Pour prouver que ce code fonctionne, appuyez simplement sur le bouton de copie dans le coin inférieur droit de l'extrait de code. Si votre appareil le prend en charge, une légère vibration doit être déclenchée pour reconnaître l'action de copie dans le presse-papiers.
Nous avons presque terminé, jetons un coup d'œil aux dernières fonctionnalités de l'API :
const cancelVibration = () => {
// Quick and easy: call 'vibrate' with
// a val of 0 and the current vibration
// is stopped.
window.navigator?.vibrate?.(0);
}
Et c'est à peu près tout ! Pas grand chose à couvrir, mais appliqué correctement, c'est-à-dire pas trop dans votre application et uniquement lorsqu'il est applicable, l'API de vibration est une fonctionnalité vraiment intéressante à utiliser. Je pense que le meilleur cas d'utilisation est de confirmer ou de refuser de manière haptique les actions importantes que l'utilisateur a effectuées, par ex. l'action de copie du code dans ce cas ou une action de suppression permanente dans une autre application.
- Tom
