Screen Wake Lock API

Es muy común que nuestros dispositivos se suspendan cuando pasa un corto tiempo en los que no detectan interacción del usuario y seguramente luchaste con esto en alguna oportunidad mientras creabas alguna aplicación que justamente no requería tanta interacción con los usuarios, sino, mas bien, que nuestros usuarios puedan leer/ver la pantalla por largos periodos de tiempo. Ejemplos típicos de este tipo de comportamientos son reproductores de multimedia o aplicaciones de cocina donde se muestran los pasos de una receta.

La API de Screen Wake Lock busca solucionar este problema en la web donde antes se requería crear una aplicación nativa, evitando que el dispositivo se suspenda.

Como se usa

A nivel de código, tenemos que llamar al método navigator.wakeLock.request() que nos va a devolver un objeto de tipo WakeLockSentinel. En caso de rechazarse el pedido, se lanzará una excepción que nos indicará el motivo, por lo que hay que hacer try/catch de esta llamada. Como buena práctica antes de llamar a la api, es recomendado verificar que exista navigator.wakeLock.

Podemos escuchar el evento de release del objeto WakeLockSentinel para detectar cuando se libera nuestro lock y aparte podemos leer la propiedad booleana released para ver el estado actual del mismo.

// The wake lock sentinel.
let wakeLock = null;

// Function that attempts to request a screen wake lock.
const requestWakeLock = async () => {
  try {
    wakeLock = await navigator.wakeLock.request();
    wakeLock.addEventListener('release', () => {
      console.log('Screen Wake Lock released:', wakeLock.released);
    });
    console.log('Screen Wake Lock released:', wakeLock.released);
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

Liberando el lock

Algo importante es que podemos liberar el lock llamando al método release() del objeto WakeLockSentinel que obtuvimos de respuesta al hacer el lock.

// Request a screen wake lock…
await requestWakeLock();

// …and release it again after 5s.
window.setTimeout(() => {
  wakeLock.release();
  wakeLock = null;
}, 5000);

Conclusiones

La incorporación de esta API, sigue reduciendo la brecha que hay entre aplicaciones nativas y la web y nos permite generar nuevos escenarios en la web. Como vimos aparte es una API muy simple para usar por lo cual vale la pena tenerla en cuenta.

Algo no menor es que ya está disponible en los tres motores de navegador principales y pasa a ser Baseline Newly disponible a partir del 14 de mayo de 2024.