Mantente activo con la API de Screen Wake Lock

La API de Screen Wake Lock proporciona una manera de evitar que los dispositivos se atenúen o bloqueen la pantalla cuando una aplicación necesita seguir ejecutándose.

Pete LePage
Thomas Steiner

¿Qué es la API de Screen Wake Lock?

Para evitar que se agote la batería, la mayoría de los dispositivos se suspenden rápidamente cuando están en el modo de suspensión. inactivo. Aunque esto es correcto la mayor parte del tiempo, algunas aplicaciones deben mantener el pantalla activa para completar su trabajo. Los ejemplos incluyen apps de cocina que muestran los pasos de una receta o un juego como Ball Puzzle, que usa el dispositivo de movimiento para entradas.

La API de Screen Wake Lock permite evitar que el dispositivo se atenúe. y bloqueando la pantalla. Esta habilita nuevas experiencias que, hasta ahora, requerían una aplicación específica para una plataforma.

La API de Screen Wake Lock reduce la necesidad de hackeo soluciones que requieren mucha energía. Aborda las deficiencias de una API anterior que estaba limitada a mantener la pantalla encendida y tenía problemas de seguridad y privacidad.

Casos de uso sugeridos para la API de Screen Wake Lock

RioRun una aplicación web desarrollada por The Guardian, fue un caso de uso perfecto (aunque ya no está disponible). La app te lleva a un recorrido virtual en audio de Río, siguiendo el recorrido del 2016 Maratón olímpico. Sin los bloqueos de activación, las pantallas se apagaban mientras se reproducía el viaje, lo que dificulta su uso.

Por supuesto, existen muchos otros casos de uso:

  • Una app de recetas que mantiene la pantalla encendida mientras horneas un pastel o cocinas cena
  • Una app de boletos o tarjetas de embarque que conserva la pantalla hasta que se escanee el código de barras
  • Una aplicación tipo kiosco que mantiene la pantalla encendida continuamente
  • Una app de presentaciones basada en la Web que mantiene la pantalla durante una presentación

Estado actual

Paso Estado
1. Crear explicación N/A
2. Crea el borrador inicial de la especificación Completo
3. Recopilación de comentarios y diseño de iteraciones Completo
4. Prueba de origen Completado
5. Lanzamiento Completo

Cómo usar la API de Screen Wake Lock

Tipos de bloqueo de activación

Actualmente, la API de Screen Wake Lock proporciona solo un tipo de bloqueo de activación: screen.

Bloqueo de activación de screen

Un bloqueo de activación screen evita que la pantalla del dispositivo gire para que el usuario pueda ver la información que se muestra en pantalla.

Cómo obtener un bloqueo de activación de pantalla

Para solicitar un bloqueo de activación de pantalla, debes llamar al método navigator.wakeLock.request() que devuelve un objeto WakeLockSentinel. Pasa a este método el tipo de bloqueo de activación deseado como parámetro, que por el momento se limita solo a 'screen' y, por lo tanto, es opcional. El navegador puede rechazar la solicitud por varios motivos (por ejemplo, porque el nivel de carga de la batería es demasiado bajo) por lo que se recomienda unir la llamada en una sentencia try…catch. El mensaje de la excepción contendrá más detalles en caso de falla.

Cómo liberar un bloqueo de activación de pantalla

También necesitas una forma de retirar el bloqueo de activación de la pantalla, que se logra llamando al Método release() del objeto WakeLockSentinel Si no almacenas una referencia a WakeLockSentinel, no hay manera para liberar el candado manualmente, pero lo hará una vez que la pestaña actual sea invisible.

Cómo retirar automáticamente el bloqueo de activación de pantalla después de que haya pasado un cierto período, Puedes usar window.setTimeout() para llamar a release(), como se muestra en el siguiente ejemplo.

// 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}`);
  }
};

// Request a screen wake lock…
await requestWakeLock();
// …and release it again after 5s.
window.setTimeout(() => {
  wakeLock.release();
  wakeLock = null;
}, 5000);

El objeto WakeLockSentinel tiene una propiedad llamada released que indica si un centinela ya se lanzó. Inicialmente, su valor es false y cambia a true cada vez que un "release" el evento. Esta propiedad ayuda a los desarrolladores web a saber cuándo un se lanzó, por lo que no necesitan hacer un seguimiento de esto manualmente. Está disponible a partir de Chrome 87.

Ciclo de vida del bloqueo de activación de la pantalla

Cuando juegues con la demostración de bloqueo de activación de pantalla, notarás que esta función son sensibles a la visibilidad de la página. Esto significa que el bloqueo de activación de pantalla se liberarán automáticamente cuando minimices un pestaña o ventana, o bien alejarte de una pestaña o ventana en la que esté activo un bloqueo de activación de pantalla.

Para volver a adquirir el bloqueo de activación de pantalla, haz lo siguiente: escuchar el evento visibilitychange y solicita un nuevo bloqueo de activación de pantalla cuando se produzcan:

const handleVisibilityChange = async () => {
  if (wakeLock !== null && document.visibilityState === 'visible') {
    await requestWakeLock();
  }
};

document.addEventListener('visibilitychange', handleVisibilityChange);

Minimiza el impacto en los recursos del sistema

¿Deberías usar un bloqueo de activación de pantalla en tu app? El enfoque que elijas dependerá de las necesidades de tu app. De cualquier manera, debes usar el enfoque más ligero posible para que tu app minimice su en los recursos del sistema.

Antes de agregar un bloqueo de activación de pantalla a tu app, considera si los casos de uso resolverse con una de las siguientes soluciones alternativas:

Demostración

Consulta la demostración de Screen Wake Lock y la fuente de demostración. Observa cómo el bloqueo de activación de pantalla se libera automáticamente cuando cambias de pestaña o apps.

Bloqueos de activación de pantalla en el administrador de tareas del SO

Puedes usar el administrador de tareas de tu sistema operativo para ver si una aplicación impide que la computadora se suspenda. En el siguiente video, se muestran las funciones Monitor de actividad lo que indica que Chrome tiene un bloqueo de activación de pantalla activo que mantiene activo el sistema.

Comentarios

Web Platform Incubator Community Group (WICG) y el equipo de Chrome quieren saber opiniones y experiencias con la API de Screen Wake Lock.

Cuéntanos sobre el diseño de la API

¿Existe algún aspecto de la API que no funcione según lo esperado? O ¿faltan métodos o propiedades que necesites para implementar tu idea?

Informar un problema con la implementación

¿Encontraste un error en la implementación de Chrome? ¿O la implementación diferente de la especificación?

  • Informa un error en https://new.crbug.com. Asegúrate de incluir tantos detalles como puedas, proporcionar instrucciones simples para reproducir el error y establece Componentes en Blink>WakeLock. Glitch funciona a la perfección. para compartir repros rápidos y sencillos.

Demuestra compatibilidad con la API

¿Planeas usar la API de Screen Wake Lock? Tu apoyo público ayuda a El equipo de Chrome prioriza funciones y muestra a otros proveedores de navegadores cómo hacerlo esencial para respaldarlos.

Vínculos útiles

Agradecimientos

Hero image de Kate Stone Matheson en Unsplash. Video del administrador de tareas, cortesía de Henry Lim