00:00:00Acabo de encontrar un paquete genial que añade un detalle pequeño pero increíble a tus sitios
00:00:04que ni siquiera sabía que quería hasta ahora.
00:00:07WebHaptics hace exactamente lo que promete y permite que tus sitios web utilicen
00:00:11respuesta háptica, ya sea en Android o iOS, y simplemente hace que se sientan más como
00:00:15una aplicación nativa, y lo hace de una manera muy limpia y sencilla; es decir, es literalmente
00:00:20una sola función.
00:00:21Y resulta que no soy el único que piensa que esto es genial, ha sido tendencia
00:00:24por todo Twitter y, al parecer, Polymarket ya ha implementado este paquete.
00:00:29Así que vamos a sumergirnos y ver a qué se debe tanto alboroto y también a hablar un poco sobre cómo
00:00:33funciona, ya que el paquete tiene un truco muy ingenioso para que funcione en iOS.
00:00:43Ahora, obviamente es difícil para mí mostrarles exactamente lo que hace este paquete, ya que es
00:00:46una vibración física de tu teléfono, pero es exactamente la misma que sientes cuando haces clic
00:00:50en suscribirse en la aplicación de YouTube; pero si ya estás suscrito y aun así quieres
00:00:54probar esto, el sitio web de WebHaptics es un lugar superdivertido para hacerlo, así que después de ver
00:00:59el video, te recomiendo mucho echarle un vistazo, ya que te muestra algunas de las hápticas comunes
00:01:02como éxito y error, y obviamente hápticas al hacer clic en un botón.
00:01:06También tiene un editor genial para crear tus propios patrones hápticos a los que volveremos
00:01:10en un momento.
00:01:11Por ahora, sin embargo, empecemos a programar y, como pueden ver, es un paquete npm muy simple e
00:01:15incluso tiene complementos para React, Vue y Svelte, pero obviamente puedes usar la variante
00:01:19de JavaScript puro si quieres, y esta función trigger será la misma en todos
00:01:23ellos.
00:01:24En mi caso usaré React y verán que el código es increíblemente simple: todo lo que necesitamos
00:01:28hacer es usar el hook useWebHaptics y de ahí obtenemos una función trigger que
00:01:32luego podemos vincular a algo como un botón para activar alguna respuesta háptica.
00:01:36También pueden ver que de este hook obtenemos una función cancel que cancelará cualquier
00:01:39respuesta háptica en ejecución y también un booleano isSupported para que puedas verificar si el navegador admite
00:01:44la respuesta háptica.
00:01:45Con este código simple, significará que cuando haga clic en este botón en un dispositivo Android
00:01:48o iOS, tendrá una pequeña vibración, pero obviamente estoy en una laptop en este momento, así que
00:01:53no va a hacer nada.
00:01:54Sin embargo, hay una pequeña forma de saber si esto está funcionando mientras lo desarrollamos
00:01:57y es configurando debug en true dentro del hook aquí, y esto solo significa que cuando
00:02:00haga clic en el botón, reproducirá un sonido que simula lo que es la respuesta
00:02:04háptica.
00:02:05En cuanto a personalizar realmente el patrón de vibración, eso también es supersencillo y podemos
00:02:09hacerlo en la función trigger.
00:02:10El primer método es mediante el uso de algunos ajustes preestablecidos que ya vienen con el paquete, por lo que puedes
00:02:14importar default patterns y aquí encontrarás algunos ajustes como buzz, error, heavy y
00:02:18muchos más, y de hecho puedes tener una idea de cómo son en el sitio web también.
00:02:22El segundo método, sin embargo, es cuando quieres un patrón de vibración completamente personalizado; todo lo
00:02:25que necesitas hacer es proporcionar un array a la función trigger y aquí definir tus vibraciones.
00:02:29En este momento tengo cuatro vibraciones en este patrón; pueden ver que pueden definir una vibración
00:02:33con un objeto donde tenemos un delay, que será el retraso desde la última vibración
00:02:37en milisegundos, luego tenemos un duration en milisegundos para cuánto durará esa vibración
00:02:41y también un valor de intensity donde 1 es la vibración más fuerte.
00:02:46Con este patrón que tengo aquí, cuando haga clic en el botón podrán escuchar cómo sonará,
00:02:49pero obviamente imaginen que eso estará vibrando en el teléfono del usuario.
00:02:53Un buen truco para crear patrones de vibración personalizados es usar ese sitio web, ya que tienen
00:02:57un editor muy agradable aquí donde puedes hacer clic para agregar una nueva vibración al array,
00:03:02puedes arrastrar para cambiar su duración, arrastrar hacia arriba y hacia abajo para cambiar su intensidad y también hacer clic
00:03:06en play aquí para escuchar cómo suena, pero también puedes usar esto en un teléfono para que realmente
00:03:09puedas tener una idea de cómo se siente.
00:03:11Como dije, es un poco difícil mostrar esto en un video, pero espero que capten
00:03:14la idea; es un paquete bastante simple, pero lo que quiero mostrarles ahora es cómo funciona,
00:03:19ya que iOS no lo puso fácil.
00:03:21Lo primero que hay que saber es que en realidad hay una API que debería exponer la función de vibración
00:03:24de tu teléfono simplemente ejecutando navigator.vibrate.
00:03:27El problema es que esto funciona genial en Android, pero iOS no tiene absolutamente ningún soporte para ello.
00:03:32Afortunadamente, hay otra forma de obtener respuesta háptica en iOS y es usar un
00:03:36input que tenga el tipo switch; cuando el usuario hace clic en esto en iOS, tiene respuesta háptica.
00:03:41Lo que hace esta librería para aprovechar eso es que cuando activamos nuestra respuesta háptica,
00:03:44esencialmente hace clic en un interruptor invisible por nosotros que imita nuestro patrón de vibración y lo
00:03:49vemos aquí abajo con esta casilla de verificación; pero cuando activo la respuesta háptica, se activa
00:03:53y desactiva varias veces, ya que ese sería el interruptor en iOS.
00:03:56Si quieres ver este interruptor tú mismo mientras depuras tu aplicación, todo lo que tienes
00:03:59que hacer en el hook aquí es agregar en la configuración showSwitch y cambiarlo a true.
00:04:03Si echamos un vistazo rápido al código del paquete en sí, pueden ver lo que está haciendo.
00:04:06Si las hápticas web son compatibles, la función navigator.vibrate simplemente usará eso para reproducir
00:04:11nuestro patrón de vibración; sin embargo, si no son compatibles, aquí abajo va a hacer clic
00:04:15en ese interruptor, y también tenemos esta función aquí que es responsable de crear realmente
00:04:19el patrón de vibración donde hace clic en ese interruptor varias veces, como podemos ver aquí abajo.
00:04:23Simplemente pensé que era una solución muy ingeniosa que valía la pena mostrar y espero que Apple no
00:04:27encuentre la manera de parchar esto o, al menos, si lo parchan, que agreguen soporte para la función
00:04:31vibrate.
00:04:32Eso es prácticamente todo lo que hay en este paquete, así que déjenme saber en los comentarios si
00:04:35esto es algo que usarían; mientras están por allí suscríbanse y, como siempre, nos vemos
00:04:38en el próximo.
00:04:41[Música]