El API de vibración de HTML5

En la actualidad gran número del tráfico en la web proviene de dispositivos móviles, al menos 1 de cada 5 personas navega en internet por medio de éste, no importando el motivo o lo que busque, sabiendo esto, podemos empezar a preocuparnos por dar una mejor experiencia y usabilidad a nuestros usuarios y con HTML5 estamos logrando esto.

Recordemos que HTML5 es modular, por lo que podemos ver nuevas propuestas y funcionalidades ser publicadas en cualquier momento para ser probadas en nuestros navegadores siempre y cuando esten disponibles en la versión de nuestro navegador. Es por eso que ahora tenemos algo nuevo que podría llegar para quedarse, la API de vibración de HTML5 (obviamente funciona con dispositivos que tienen esta capacidad) que ha sido criticada y aplaudida por desarrolladores.

El lado malo de la API de vibración

Podemos ponernos a debatir esto largo tiempo, pero no es el caso del post, solo toquemos un poco este tema. Como siempre sucede cuando le damos más poder al navegador y en específico Javascript, llegan las cuestiones de seguridad de software y hardware, está API no te asegura que alguien le de un mal uso ya que hasta ahora el navegador no le notifica al usuario que haremos uso de la funcionalidad de vibración (una alerta de permisos quizás quite lo agradable al usuario), la función permite controlar esto por un largo periodo de tiempo o lo que el desarrollador le indique sin límite.

El lado bueno de la API de vibración

Si somos desarrolladores buenos y éticos no dañaríamos el dispositivo de nuestros usuarios; podemos hacer cosas muy buenas con está API, por dar algunas ideas:

• Podemos hacer una pequeña vibración al pulsar links (Con esto hacemos entender al usuario que toco un link)
• Si hacemos un sitio web interactivo, podemos agregar vibración a efectos como terremotos, explosiones, golpes y demás.
• Enviar mensajes con clave morse (existe un ejemplo de esto aquí)
• Alertas de cualquier tipo, etc.

En resumen, podemos mejorar la experiencia del usuario en nuestro sitio web para versiones móviles aprovechando esta oportunidad, tan solo tenemos que estar pendientes de lo que sucede con esta tecnología para mantener la seguridad del usuario.

¿Cómo funciona?

Primero debemos saber si existe esta funcionalidad en el navegador:

//Así como en CSS3, tenemos variantes para distintos navegadores. Tan solo obtenemos la función automáticamente
//cuando el navegador encuentre la que exista en su motor de javascript.
navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate;

//Ahora preguntamos si realmente existe.
if (navigator.vibrate) {
    console.log('¡Puedes hacerlo vibrar!');
} else {
    console.log('No puedes hacerlo vibrar :'(');
}

El uso de esta función:

//Tan sencillo cómo esto, solo pasamos el parametro la cantidad de milisegundos que necesitemos hacer vibrar el dispositivo
navigator.vibrate(1000);

//Otra manera es pasar como parametro un arreglo, donde cada posición es una escala pudiendo marcar un ritmo
navigator.vibrate([500, 250, 100, 1000]);

//¡No molestes al usuario con esto!

Parar la vibración:

//Tan solo como parámetro ponemos un 0
navigator.vibrate(0);

Soporte en navegadores

• Google Chrome Beta para Android
• Firefox para Android
• Safari iOS no lo soporta aún
• Google Chrome para Android tampoco

Si quieres la información de primera mano, puedes leer la recomendación de la W3C.

Fuente externa Shape Shed