HTML5 a sido una gran evolución para la web, incorpora todo tipos de elementos que podemos emplear en múltiples propósitos y que los podemos extender mediante distintas librerías; poder crear sitios webs interactivos se ha simplificado mucho y de esta manera poder mejorar la experiencia de usuario en PC y en dispositivos móviles.
Un ejemplo de utilidad muy poco usado y menos explotado es la AP de vibración en HTML, esta es una API muy útil para las aplicaciones móviles hoy en día, la recepción de correos, mensajes de textos, llamadas todo esto pasa por una vibración del dispositivo que es lo primero que notamos si llevamos el teléfono inteligente encima y es una de las pocas API que no emplean la vista ni nuestros dedos; basta con que tengamos el móvil cerca y este vibre y de esta forma la aplicación nos da información al respecto (generalmente es un aviso de una notificación) sin necesidad de visualización del móvil y todo esto lo podemos transmitir al usuario.
Dispositivos como tablets y teléfonos tienen hoy en día una presencia importante en la web; se estima que el tráfico de datos generado por estos dispositivos supere al tráfico de datos generado por las PC en unos pocos años; por tal motivo, es importante para nosotros los desarrolladores explotar de la mejor manera posible todas las herramientas que nos brinda la Web; entre ellas esta la API de Vibración de HTML5. En este artículo veremos cómo agregar esta caracteristicas de hacer vibrar a los dispositivos a nuestras aplicaciones.
El método vibrate
del objeto navigator
permite activar la vibración por hardware de un dispositivo mediante JavaScript; claro, esto ocurrirá si tal hardware está presente en dicho dispositivo; si el dispositivo no soporta vibración, el método no tendrá ningún efecto sobre el dispositivo.
¿Qué es?, La API de Vibración en detalle
Como indicamos antes, la API Vibration o de vibración está diseñada para que en vez de recibir una respuesta táctil o sonora, esta respuesta sea física, ya que el dispositivo tiene la capacidad de vibrar en un dispositivo moderno con Android, iOS o un dispositivo similar.
¿Cómo emplearlo? - Sintaxis
La API de vibración se accede mediante el objeto global navigator
de la siguiente forma:
navigator.vibrate(patrón);
Vibrar una sola vez
En donde patron puede ser:
- Un entero sin signo: Que representa la duración dada en milisegundos de una y solo una vibración; por lo tanto es la manera más simple de establecer vibraciones; veamos un ejemplo: // vibra por un segundo navigator.vibrate(1000);
El código anterior hará vibrar al dispositivo por 1000 milisegundos, o lo que es lo mismo, por un segundo.
Vibrar/dejar de vibrar varias veces
- Una secuencia de enteros con signos: o mejor dicho, un arreglo con múltiples valores que representan los intervalos de vibración y pausa en milisegundos para cada uno de los valores contenido dentro del arreglo de manera alternada. // vibra por un segundo, deja de vibrar por medio segundo para luego vibrar dos segundos más navigator.vibrate([1000, 500, 2000]);
El código anterior hará vibrar al dispositivo por un segundo, luego habrá una espera de medio segundo, para finalizar por una vibración de dos segundos.
Detener o parar la vibración del dispositivo
La API de Vibración no bloqueará tu código JavaScript; y por lo tanto, seguirá ejecutándose mientras el dispositivo está vibrando. Si por alguna circunstancia deseas finalizar la vibración, puedes establecer en cero el patrón:
// detiene la vibración del dispositivo navigator.vibrate(0);
También es posible cancelar la vibración del dispositivo con:
// también detiene la vibración del dispositivo navigator.vibrate([]); // esta también ... navigator.vibrate([0]);
Detectando el soporte del API de Vibración en los navegadores
Siempre es aconsejable realizar las validaciones necesarias antes de trabajar con cualquiera de las APIs en HTML5; para detectar la presencia del API de Vibración solo hay que realizar la siguiente comprobación:
var soporteVibracion= "vibrate" in navigator;
Imagen 1: Soporte de la API de Vibración en el navegador Google Chrome para PC.
Como podemos apreciar en la imagen anterior; dicha comprobación nos devolverá un booleano:
- true: El navegador ofrece soporte sobre la API de Vibración.
- false: El navegador no ofrece soporte sobre la API de Vibración.
¿Para que usar la API de Vibración?
Esta API está claramente diseñada para dispositivos móviles; resulta de ayuda para alertar al usuario sobre algún cambio en la aplicación Web; inclusive al momento de desarrollar, al momento de una explosión o una balacera hacer vibrar al dispositivo.
Conclusiones
Esta API es muy sencilla de utilizar y muy poderosa; ya que permite acceder al hardware del dispositivo; sin embargo, hay que tener mucho cuidado en emplear esta API; cabe recordar que solo funciona con dispositivos móviles (obvio que no va a vibrar el PC), además de esto, NO debemos de dejar el dispositivo del cliente vibrando eternamente por muy provocadora y divertida que resulte la idea.
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter