Excelente título para el blog, pero… ¿Qué es el API Wake Lock? Bueno, con esta API podemos evitar que la pantalla del dispositivo se duerma mientras nuestra aplicación está en uso. Pongamos ejemplos de su uso: una aplicación de mapas, por ejemplo, mientras el usuario sigue la ruta se bloquea la pantalla para evitar que se oscurezca. Otros dos ejemplos serían un lector de libro digital y una aplicación de Pomodoro. Y este último es el ejemplo que veremos en este blog. A continuación, te proporcionamos el código de partida para que puedas copiarlo en tu editor, comprobarlo y seguir los pasos junto conmigo.
Código de Partida: HTML y CSS
Código de Partida: JavaScript
¡Explicando el código!
Ahora, explicando un poquito el código, en el HTML y el CSS no creo que sea necesario explicar nada, ya que son estilos comunes. En el JavaScript ya tenemos preparado un temporizador con 5 segundos por defecto. Lo que estamos haciendo es que al hacer clic en el botón Start (comenzar), se activa el temporizador y cada vez que llega a cero, se detiene y se reinicia.
En realidad, no hay mucho más que explicar. Sin embargo, antes de utilizar esta API, es importante tener en cuenta que mantener el dispositivo despierto en todo momento mientras se utiliza nuestra aplicación, afecta el consumo de la batería. Por lo tanto, es recomendable utilizarlo solo cuando sea necesario. En este caso, vamos a hacer uso de esta API siempre y cuando esté activado el temporizador. Así que el primer paso es declarar la función encargada de hacer la petición de bloqueo.
Petición de bloqueo de pantalla - API Wake Lock
Primero, voy a declarar una variable en el ámbito global que utilizaré tanto para bloquear como para desbloquear la pantalla. La llamaré igual que esta API, es decir, wakeLock y le asignaré un valor nulo (let wakeLock = null). Luego, declararemos la función encargada de hacer la petición de bloqueo que llamaremos solicitarBloqueoPantalla(). Es importante tener en cuenta que esta función debe ser asíncrona ya que necesitamos hacer una petición al navegador, pero es necesario esperar por su respuesta antes de continuar. Para declarar la función como asíncrona, solo necesitamos utilizar la palabra clave async antes de la declaración. Antes de hacer la petición de bloqueo, utilizaremos la palabra clave await que, traducida al español, significa esperar. De este modo, le estamos diciendo al programa que es necesario esperar por la respuesta del navegador antes de continuar. Es importante tener en cuenta que esto se puede ver en el código que se encuentra debajo.
Antes de continuar quería dejarte saber que ya tenemos listo el tutorial sobre el API Wake Lock en nuestro canal de YouTube y te lo dejo por 👉👉 AQUÍ 👈👈
Captura de errores en la petición
Ahora, dentro vamos a utilizar un try catch por si tenemos algún error poder capturarlo. Entonces, vamos a hacer la petición en el bloque try. Sería: wakeLock = await navigator.wakeLock.request(‘screen’). Primero que todo ponemos la palabra clave await, después mencionamos el objeto navigator (navegador) luego, la propiedad wakeLock dentro de este objeto y por último, hacemos uso del método request() pasándole el valor screen, ya que es este el cual solicita el bloqueo de la pantalla. Agregamos un console.log que diga que la pantalla se ha bloqueado y otro para mostrar en consola la variable wakeLock porque luego quiero mostrarte algo. Y en la parte del catch hacemos console.error que diga que tenemos un error y le pasamos el error que se ha capturado. Ahora, ¿Desde dónde voy a llamar esta función? Pues cuando se activa el temporizador, vamos a hacerlo después de inicializar las variables. Aquí abajo te voy a dejar el código completo con este cambio implementado. Primero la función comenzarTemporizador y de segunda la función que se encarga de hacer la petición de bloqueo (solicitarBloqueoPantalla()).
¿Cómo desbloquear la pantalla?
Si haces clic en el botón Start y no tenemos ningún bug (error) por ahí escondido, debería hacer la petición de bloqueo perfectamente. Como te mencioné anteriormente, esto afecta la duración de la batería del dispositivo, así que en cuanto se detenga el temporizador, necesitamos hacer la petición de desbloqueo. Ahora, necesito que vayas a la consola y verás que en cuanto se hace la petición de bloqueo, sale un mensaje diciendo que la pantalla ha sido bloqueada y además, la variable wakeLock que ahora mismo almacena el objeto devuelto en la petición de bloqueo. Dentro de ella, notarás que hay una propiedad llamada released con el valor false. Pues esta propiedad es la que indica si la pantalla está bloqueada o no. Released en español significa liberado, o sea que si su valor es false como es en este caso, eso indica que la pantalla está bloqueada. Para desbloquear la pantalla, vamos a utilizar el método release(), ya que este modifica el valor inicial de la propiedad released a true, indicando que ahora está desbloqueada (liberada).
Método release() - API Wake Lock
Ahora vamos a declarar la función para desbloquear la pantalla y esta también es asíncrona. Vamos a llamarla desbloquearPantalla() y puedes ver el código completo abajo mientras lees para que te sea más fácil de entender. Dentro, otra vez utilizaremos un try catch para capturar y manejar adecuadamente los errores. En el bloque try, lo primero que hacemos es hacer la petición de desbloqueo de este modo await wakeLock.release(). Luego pasamos un mensaje por la consola indicando que la pantalla se ha desbloqueado, también pasamos por la consola la variable wakeLock para que puedas ver cómo se modifica el valor inicial de la propiedad released de false a true. Por último, devolvemos a la variable wakeLock su valor inicial de null. En el bloque catch solo agregamos un console.error y pasamos un mensaje especificando el error. Esta función la llamaremos dentro del if donde se limpia el intervalo. El código completo hasta este punto está a continuación. Recuerda que la función desbloquearPantalla() es la última en el código.
Comprobar Compatibilidad - API Wake Lock
Realmente ya estará funcionando perfectamente el bloqueo y desbloqueo, pero siempre es sumamente importante comprobar la compatibilidad de esta API en el navegador en el cual se va a utilizar. Realmente, el único navegador que no es compatible con esta API (hasta el momento) es Firefox. Pero bueno, nosotros estamos conscientes del navegador que utilizamos en nuestro ordenador, pero no del que utiliza el usuario. Así que siempre es necesario comprobar la compatibilidad antes de hacer cualquier petición. Esto lo he dejado para el final porque es la parte más sencilla de implementar a nuestro código. Para este ejemplo, vamos a declarar una función llamada comprobarCompatibilidad() y dentro colocamos una condición que diga if (‘wakeLock’ in navigator), que siempre que el navegador sea compatible con el API Wake Lock, entonces que haga la petición de bloqueo. En la parte falsa, es decir, en caso de que no sea compatible, mostramos un mensaje por la consola diciendo que el navegador no es compatible con esta API. Aquí abajo puedes ver esta función terminada.
Ahora solo tenemos que hacer un pequeño cambio. A la hora de hacer la petición de bloqueo, en vez de llamar directamente a la función encargada de hacer dicha petición (solicitarBloqueoPantalla), llamamos a la función que verifica la compatibilidad. Entonces, esta se encargará de llamar a la función encargada de hacer la solicitud, pero siempre y cuando el navegador sea compatible con esta API. Aquí abajo te voy a dejar el código completo hasta este punto para que lo copies, lo pruebes en tu propio editor y veas su funcionamiento.
Repasando lo Aprendido
Durante este blog, exploramos la funcionalidad y aplicación del API Wake Lock para controlar el comportamiento de bloqueo de la pantalla del dispositivo. Aquí te dejo un resumen de los puntos clave para refrescar rápidamente lo discutido.
🚀 Resumen Rápido: Usando el API Wake Lock
- API Wake Lock: Permite evitar que la pantalla del dispositivo se duerma mientras nuestra aplicación está en uso.
- Uso en la Vida Real: Ejemplos como aplicaciones de mapas, lectores de libros digitales y aplicaciones de Pomodoro.
- Consumo de Batería: Es importante considerar el impacto en la batería del dispositivo y usarlo solo cuando sea necesario.
- Declaración y Uso: Creación de funciones asíncronas para hacer peticiones de bloqueo y desbloqueo, con la ayuda de `async` y `await`.
- Manejo de Errores: Uso de bloques try-catch para manejar errores durante las peticiones.
- Compatibilidad del Navegador: Comprobación de la compatibilidad de la API en diferentes navegadores antes de hacer peticiones.
Despedida
¡Eso es todo por hoy, queridos coders y codigo-lovers! Espero que hayan disfrutado de este blog y que hayan aprendido algo valioso sobre el API Wake Lock. Si tienen alguna duda o necesitan ayuda adicional, no duden en ponerse en contacto conmigo. Siempre estoy aquí para ayudarles en todo lo que necesiten. Muchas gracias por leer y seguir mi contenido en este blog, y espero verlos pronto en próximas publicaciones. ¡Hasta la próxima! Nos leemos en el siguiente.
¡Un Abrazo! Braulio de AprendeCode