Evita el auto-bloqueo de pantalla con Wake Lock API en tu PWA
🔓 Aprende a evitar que las pantallas de los dispositivos de tus usuarios se bloqueen mientras usan tu PWA con Wake Lock API.
Si en tu día a día desarrollas aplicaciones web y/o móviles que requieren de interacción continua con el usuario, seguro te has topado con el inconveniente del autobloqueo de pantalla. Si bien éste fue pensado para disminuir el consumo de energía y extender la vida útil del display, cuando debemos trabajar, estudiar o pasar un buen rato, esta característica se vuelve en contra del usuario.
El escenario ideal
Imagina un blog o portal de noticias donde el usuario debe leer una nota de extensión media, o quiere seguir el paso a paso de una tarea, leer una receta de cocina, escuchar música siguiendo la letra de la canción a la par, enviar información a un servidor y esperar su respuesta o, porque no, leer un e-book online. En cualquiera de estos casos, el bloqueo de pantalla no es efectivo, como tampoco lo es estar desactivando el autobloqueo en el apartado Configuración.
Wake Lock API es una característica que, si bien aún está en desarrollo, nos ayuda a sumar la capacidad de evitar el autobloqueo del display o la activación de un protector de pantalla, cuando el usuario interactúa con algún módulo importante de nuestra aplicación.
Las aplicaciones nativas cuentan con esta característica desde casi siempre, pero las aplicaciones web o aplicaciones web progresivas, no disponen de esta funcionalidad, excepto cuando se utiliza el tag HTML "video" nativo de HTML5. No así cuando utilizamos el tag "audio".
Cómo utilizar wake lock API en tu PWA
Su integración para PWA es muy simple. Encontramos esta característica dentro del objeto JS navigator, bajo el nombre wakeLock:
navigator.wakeLock;
La misma tiene dos métodos bastante simples de invocar. Request es uno de ellos y lo llamamos cuando deseamos evitar desde nuestra solución, que se active el autobloqueo de la pantalla.
navigator.wakeLock.request('screen');
El otro método, Release, tal como su nombre lo indica, se utiliza para liberar al dispositivo una vez cumplido el propósito de nuestra aplicación web y que se vuelva a activar el autobloqueo o protector de pantalla, en el tiempo estipulado dentro del sistema operativo.
Como siempre, les acercamos un ejemplo funcional a través de Github, para que puedan testear esta característica previo a utilizarla en sus dispositivos de escritorio o móviles.
A tener en cuenta
Esta API es funcional de manera limitada, dado que todavía se encuentra en desarrollo. Les compartimos, a continuación, el cuadro de disponibilidad de la misma publicado en MDN. Verifica por favor al momento de leer esta nota, si hubo avances o no en su desarrollo.
La API cuenta con algunas restricciones de uso, muy bien implementadas, y se dan cuando:
- El usuario activó el modo de ahorro de energía.
- La batería del dispositivo es baja.
- El usuario quita el foco la pestaña.
- El usuario minimiza su PWA.
Con cualquiera de estos casos, el S.O. rechazará la petición del navegador y no se activará la característica.
Si alguno de estos puntos ocurre, tenemos la opción de subsanar el UI y la lógica de nuestra aplicación web, apoyándonos en el manejo de los siguientes eventos:
wakeLock.addEventListener('release', ...);
Y también en:
document.addEventListener('visibilitychange', ...);
Como desarrolladores que integran buenas prácticas, debemos pensar también en no mostrar mensajes intrusivos en nuestra aplicación cuando se activa o desactiva esta característica, y hasta proveer un timeout automático si el usuario deja de interactuar con nuestra PWA, aunque la misma quede en primer plano.
Si tienes dudas, deja un comentario para que entre todos podamos ir mejorando.
¡Espero que les sea útil y disfruten de esta característica! 😝
Para dejar tu comentarios debes pertenecer a la Comunidad.