¡Brm, Brm!
La interacción con el usuario en un nivel "sensual" puede mejorar enormemente la experiencia del usuario de su aplicación. Por lo general, nosotros, como desarrolladores, tenemos que limitarnos a animaciones sofisticadas, como efectos de paralaje o renderizaciones 3D para transmitir una sensación más realista dentro de nuestras aplicaciones. ¿Pero sabías que las aplicaciones web progresivas pueden ofrecer mucho más? Hoy veremos el lado háptico de las interacciones entre la web y el usuario.
Rumble en la jungla (dev-)
En el momento de escribir este artículo, no todos los entornos brindan soporte para la nueva Vibration-API. Específicamente, se pueden usar todos los navegadores Chromium y Firefox, mientras que todas las variantes de Safari / WebKit no tienen soporte. Nota: todos los navegadores de iOS utilizan WebKit como motor.
El uso de la API en sí es tan sencillo como parece. He aquí un ejemplo:
// 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]);
}
Para comprobar que este código funciona, simplemente toque el botón copiar en la esquina inferior derecha del fragmento de código. Si su dispositivo lo admite, se debe iniciar una suave vibración para reconocer la acción de copiar al portapapeles.
Ya casi terminamos, echemos un vistazo a las últimas características de la API:
const cancelVibration = () => {
// Quick and easy: call 'vibrate' with
// a val of 0 and the current vibration
// is stopped.
window.navigator?.vibrate?.(0);
}
¡Y eso es todo! No hay mucho que cubrir, pero se aplica correctamente, es decir, no demasiado en su aplicación y solo cuando es aplicable, la API de vibración es una característica realmente excelente para usar. Creo que el mejor caso de uso es confirmar o negar hápticamente acciones importantes que el usuario ha realizado, p. Ej. la acción de copiar para el código en este caso o una acción de eliminación permanente en otra aplicación.
- Tom
