La API de Screen Wake Lock proporciona una forma de evitar que los dispositivos atenúen o bloqueen la pantalla cuando una aplicación necesita seguir ejecutándose.
¿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 inactivos. Si bien esto es correcto la mayor parte del tiempo, algunas aplicaciones necesitan mantener la pantalla activa para completar su trabajo. Entre los ejemplos, se incluyen apps de cocina que muestran los pasos de una receta o un juego como Ball Puzzle, que usa las APIs de movimiento del dispositivo para la entrada.
La API de Screen Wake Lock proporciona una forma de evitar que el dispositivo atenúe y bloquee la pantalla. Esta función habilita experiencias nuevas que, hasta ahora, requerían una app específica de la plataforma.
La API de Screen Wake Lock reduce la necesidad de soluciones alternativas y que podrían requerir mucha energía. Aborda las deficiencias de una API anterior que se limitaba a mantener la pantalla encendida y tenía varios problemas de seguridad y privacidad.
Casos de uso sugeridos para la API de Screen Wake Lock
RioRun, una app web desarrollada por The Guardian, era un caso de uso perfecto (aunque ya no está disponible). La app te lleva a una audioguía virtual por Río, siguiendo la ruta del maratón olímpico de 2016. Sin bloqueos de activación, las pantallas de los usuarios se apagarían con frecuencia mientras se reproduce la visita, 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 preparas la cena
- Una app de boletos o tarjetas de embarque que mantiene la pantalla encendida hasta que se escanea 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 encendida durante una
Estado actual
Paso | Estado |
---|---|
1. Crea una explicación | N/A |
2. Crea el borrador inicial de la especificación | Completar |
3. Recopila comentarios y itera el diseño | Completar |
4. Prueba de origen | Completado |
5. Lanzamiento | Completar |
Cómo usar la API de Screen Wake Lock
Tipos de bloqueos de activación
Actualmente, la API de Screen Wake Lock solo proporciona 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 se apague para que el usuario pueda ver la información que se muestra en ella.
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 muestra un objeto WakeLockSentinel
.
Le pasas a este método el tipo de bloqueo de activación deseado como parámetro, que actualmente 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 declaración 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 liberar 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 forma de liberar el bloqueo de forma manual, pero lo hará una vez que la pestaña actual sea invisible.
Si quieres retirar automáticamente el bloqueo de activación de pantalla después de un período determinado, 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 ya se lanzó un centinela.
Inicialmente, su valor es false
y cambia a true
una vez que se envía un evento "release"
. Esta propiedad ayuda a los desarrolladores web a saber cuándo se liberó un bloqueo para que no necesiten realizar un seguimiento de esto manualmente.
Está disponible a partir de Chrome 87.
Ciclo de vida del bloqueo de activación de pantalla
Cuando juegues con la demostración de bloqueo de activación de pantalla, notarás que estos son sensibles a la visibilidad de la página. Esto significa que el bloqueo de activación de la pantalla se liberará automáticamente cuando minimices una pestaña o ventana, o cambies de una pestaña o ventana en la que esté activo un bloqueo de activación de la pantalla.
Para volver a adquirir el bloqueo de activación de pantalla, escucha el evento visibilitychange
y solicita un nuevo bloqueo de activación de pantalla cuando ocurra:
const handleVisibilityChange = async () => {
if (wakeLock !== null && document.visibilityState === 'visible') {
await requestWakeLock();
}
};
document.addEventListener('visibilitychange', handleVisibilityChange);
Minimiza el impacto en los recursos del sistema
¿Debes usar un bloqueo de activación de pantalla en tu app? El enfoque que elijas dependerá de las necesidades de tu app. Sin embargo, debes usar el enfoque más ligero posible para tu app para minimizar su impacto en los recursos del sistema.
Antes de agregar un bloqueo de activación de pantalla a tu app, considera si tus casos de uso se podrían resolver con una de las siguientes soluciones alternativas:
- Si tu app realiza descargas de larga duración, considera usar la recuperación en segundo plano.
- Si tu app sincroniza datos desde un servidor externo, considera usar la sincronización en segundo plano.
Demostración
Consulta la demo de Screen Wake Lock y la fuente de la demo. Observa cómo el bloqueo de activación de pantalla se libera automáticamente cuando cambias de pestaña o app.
Bloqueos de activación de pantalla en el administrador de tareas del SO
Puedes utilizar el administrador de tareas de tu sistema operativo para ver si una aplicación evita que la computadora se suspenda. En el siguiente video, se muestra el Monitor de actividad de macOS, que indica que Chrome tiene un bloqueo de activación de pantalla activo que mantiene activo el sistema.
Comentarios
El Web Platform Incubator Community Group (WICG) y el equipo de Chrome quieren conocer tus opiniones y experiencias con la API de Screen Wake Lock.
Cuéntanos sobre el diseño de la API
¿Hay algo en la API que no funciona como se espera? ¿O faltan métodos o propiedades que necesitas para implementar tu idea?
- Informa un problema de especificación en el repositorio de GitHub de la API de Screen Wake Lock o agrega tus comentarios a un problema existente.
Denuncia un problema con la implementación
¿Encontraste un error en la implementación de Chrome? ¿O la implementación es diferente a la especificación?
- Informa un error en https://new.crbug.com. Asegúrate de incluir la mayor cantidad de detalles posible, proporciona instrucciones simples para reproducir el error y establece Componentes en
Blink>WakeLock
. Glitch es excelente para compartir reproducciones rápidas y fáciles.
Demuestra compatibilidad con la API
¿Piensas usar la API de Screen Wake Lock? Tu apoyo público ayuda al equipo de Chrome a priorizar las funciones y les muestra a otros proveedores de navegadores lo importante que es admitirlas.
- Comparte cómo planeas usar la API en la conversación de Discourse de WICG.
- Envía un tuit a @ChromiumDev con el hashtag
#WakeLock
y cuéntanos dónde y cómo lo usas.
Vínculos útiles
- Especificación Recomendación de candidato | Escritor en borrador
- Demostración de Screen Wake Lock | Fuente de la demostración de Screen Wake Lock
- Seguimiento de errores
- Entrada de ChromeStatus.com
- Experimenta con la API de Wake Lock
- Componente de parpadeo:
Blink>WakeLock
Agradecimientos
Imagen hero de Kate Stone Matheson en Unsplash. Video del Administrador de tareas cortesía de Henry Lim.