La API Vibration (Vibración) en HTML5

04-02-2014 - Andrés Cruz

La API Vibration (Vibración) en HTML5 In english

Este material forma parte de mi curso y libro completo; puedes adquirirlos desde el apartado de libros y/o cursos.

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;

html5 vibration api

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.


Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.

Conozca nuestros cursos sobre Laravel, CodeIgniter, Flutter, Electron, Django, Flask y muchos más!

Ver los cursos
¡Hazte afiliado en Gumroad!

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
!Web Alojada en Hostinger!