Imagina que estas desarrollando una aplicacion web genial, en la cual proporcionas un reproductor (que no es el de youtube) para reproducir algunos videos, o talvez quieres poner un reproductor de musica en el mismo, haces todo el codigo y comienzas a probar a ver si es responsive, y te das cuenta que cuando ya llevas viendo medio video o reproduciendo media playlist la pantalla del movil se bloquea e interrumpe tu experiencia de lo mas feo!
Bueno antes de que leyeras este post, seguramente dirias meeh! lo arreglo cuando lancemos la app movil, pero ahora te presento este pedazo de magia que he ecnotrado por ahi cuando intentaba solucionar este problema yo mismo. Se llama NoSleep.js y es basicamente una libreria de javascript que evita que el comportamiento anteriormente explicado no sea posible, dejando que tus usuarios disfruten de la multimedia de tu sitio de forma completa, si el tedio de tener que desbloquear la pantalla cada minuto.
Usar la libreria es super sencillo, simplemente podemos incluir el siguiente snippet al cargar el documento:
var noSleep = new NoSleep();
function enableNoSleep() {
noSleep.enable();
document.removeEventListener('touchstart', enableNoSleep, false);
}
// Habilitar el seguro para no bloquear la pantalla
document.addEventListener('touchstart', enableNoSleep, false)
Y cuando quieras devolver el control de lo que pasa al navegador nativo del movil, simplemente agregamos esto:
noSleep.disable();
Que podrias ponerlo en el evento ‘ended’ del reproductor multimedia html5 de tu eleccion.
Lo que hace que la magia funcione es que la libreria en su nucleo emula la reproduccion de un medio digital mp4, el cual el navegador tiene ordenes de no interrumpir bloqueando la pantalla, y que en nuestro caso permite que seamos capaces de proveer una experiencia ininterrumpida al usuario.
Esto es perfecto para propositos como:
- Aplicaciones de realidad virtual
- Listas de reproduccion
- Lectura de articulos o imagenes extremadamente largos (pero que aun asi caben en un solo “golpe de pantalla”)
O simplemente no quieres que tus usuarios distraigan la atencion de tu sitio porque se les bloqueo la pantalla, para mantener el engagement al maximo en sus sitios que seguro son extraorinarios.
Esperemos que algun dia el draft de Wake Lock API llegue a ser implementado por alguno de los navegadores autoritativos y tengamos una opcion para dejar de utilizar estos metodos poco ortodoxos para lograr este objetivo 🙂