Recientemente noté una ventana emergente de error en Chrome que decía que navigator.vibrate solo se puede llamar una vez que el usuario interactuó con la página:
Podría cambiar mi página para solicitar la interacción del usuario (con un botón, por ejemplo), pero prefiero mantener mi página como está. Pero entonces necesitaría saber si puedo llamar a navigator.vibrate.
Mi primer enfoque fue establecer un booleano en verdadero después del primer evento de inicio táctil:
let canVibrate = false; document.addEventListener("touchstart", () => { if (canVibrate) { navigator.vibrate(200); } else { canVibrate = true; } });Este primer enfoque funciona cuando el usuario toca con un dedo, probablemente en la mayoría de los casos.
Sin embargo, esto no funciona si antes de tirar de su dedo, el usuario baja otro. En ese escenario, el error aparece por cada toque realizado antes de quitar todos los dedos. Y luego, todavía necesita un toque más, como si todo esto no contara como una interacción.
¿Hay alguna función de javascript que me permita saber si se puede llamar a navigator.vibrate? Y si no, ¿cuáles son algunas formas de probarlo?
Según un ejemplo en la página de MDN para eventos táctiles
Esto llama a event.preventDefault() para evitar que el navegador continúe procesando el evento táctil (esto también evita que se entregue un evento de mouse). Luego obtenemos el contexto y extraemos la lista de puntos de contacto modificados de la propiedad TouchEvent.changedTouches del evento.
Para poner esto en un ejemplo, puedes hacer algo como:
let canVibrate = false; document.addEventListener("touchstart", (event) => { if (!canVibrate) { canVibrate = true } navigator.vibrate(200); });