El desarrollador Front-End siempre busca la manera de interactuar con el usuario, su objetivo principal es lograr que el usuario de sienta a gusto y conectado (en sentimiento) con la página. Siempre buscará la forma de agregar alguna característica o funcionalidad que sorprenda al usuario, para esto se ha creado una interesante API del navegador, que te ayudará a agregar un nivel más de experiencia en tu página o aplicación.
Hoy te enseñaré a hacer vibrar tu celular con JavaScript, esto lo lograremos con una API llamada window.navigator.vibrate. Cabe destacar que esta API funciona solo en dispositivo que cuenten con el hardware compatible, sino, simplemente no surtirá efecto.
Configurando el entorno de desarrollo para poder ver nuestro móvil en acción
Lo haremos con un módulo NPM llamado live-server que nos permitirá servir nuestro index.html en el navegador, además, nos dará la posibilidad de visualizar el index.html en nuestro móvil a través de la ip local, esto es muy necesario ya que en él es donde se reproducirá la vibración.
En nuestra terminal crearemos una carpeta para trabajar con nuestro proyecto, lo haremos con $ mkdir vibrar-con-javascript. Luego entraremos a ella $ cd vibrar-con-javascript para poder iniciar nuestro proyecto con $ npm init -y.
Instalaremos live-server con $ npm install live-server y crearemos nuestro archivo index.html.
En nuestro index.html agregaremos la estructura de una página básica para posteriormente servir los archivos en el navegador corriendo el comando $ live-server.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style type="text/css">
body {
background-color: lightgray;
}
</style>
</head>
<body>
<h1>¡A vibrar!</h1>
</body>
</html>
Cuando corramos live-server nuestro navegador nos abrirá una pestaña nueva con el documento servido.
Para poder ver este documento en nuestro teléfonos necesitamos saber la IP IPv4 para poder acceder al puerto donde está alojada nuestra página. Con el comando ipconfig (en windows) la podemos ver, solo tenemos que buscar en el navegador de nuestro teléfono la siguiente dirección: <tu dirección IPv4>:8080, por ejemplo en mi caso es: 192.168.250.5:8080. Cuando ingresemos a ese puerto desde nuestro teléfono nos debería aparecer nuestro: “¡A vibrar!”.
Haciendo vibrar a nuestro móvil
Ahora sí podemos empezar a trabajar con la API, hay que saber que la única forma de ejecutarla es obteniendo algún gesto del usuario, no podemos activar la vibración automáticamente. ¡Agreguemos un botón para que el usuario presione!
<button id="button">¡Vibrar!</button>
Al tener esta gestión podemos hacer vibrar nuestro teléfono haciendo click, pero para lograrlo tenemos que crear una función.
<script type="text/javascript">
const button = document.getElementById('button');
button.addEventListener('click', hacerVibrar);
function hacerVibrar(){
window.navigator.vibrate([1000]);
}
</script>
Vemos que window.navigator.vibrate() recibe una matriz o arreglo, pero también le podemos pasar un simple número, que representa mili-segundos, sin usar [].
¡Ahora ya podemos hacer vibrar nuestro teléfono pulsando el botón!
Para poder controlar las vibraciones usaremos la matriz que le pasamos, el patrón sería: [vibrar, no vibrar, vibrar, no vibrar...], o sea que si le pasamos la siguiente matriz: [500,100,500,100] lo que hará es que nuestro teléfono vibrará 500 ms, luego se quedará quieto por 100 ms para volver a encender 500 ms más… y así sucesivamente.
¡Podemos crear patrones geniales! Por ejemplo podemos pedir ayuda en morse (S.O.S) con el siguiente patrón:
[100,30,100,30,100,30,200,30,200,30,200,30,100,30,100,30,100].
Hice una aplicación donde suena una música y el celular vibra a su ritmo usando esta API. ¡Mira cómo funciona!
Conclusión
Puedes lograr cosas interesantes con esta API, además, agregará una capa de experiencia a tu aplicación que pocas páginas tienen. ¡Espero que te haya servido este artículo! Si sabes otro uso que se le puede dar, por favor, escribe un comentario para que lo compartas con tus compañeros de estudio.
Referencias
Curso Profesional de JavaScript
