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.
¿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:
- Si tu aplicación realiza descargas de larga duración, considera usar recuperación en segundo plano.
- Si tu app sincroniza datos desde un servidor externo, considera usar sincronización en segundo plano.
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?
- Informa un problema de especificaciones en el repositorio de GitHub de la API de Screen Wake Lock. o agrega lo que piensas a un problema existente.
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.
- Comparte cómo planeas usar la API en la conversación de Discourse de WICG.
- Envía un tweet a @ChromiumDev con el hashtag
#WakeLock
y cuéntanos dónde y cómo la utilizas.
Vínculos útiles
- Recomendación de candidato de la especificación | Borrador del editor
- Demostración de bloqueo de activación de pantalla | Fuente de la demostración del bloqueo de activación de pantalla
- Seguimiento de errores
- Entrada de ChromeStatus.com
- Experimenta con la API de Wake Lock
- Componente de parpadeo:
Blink>WakeLock
Agradecimientos
Hero image de Kate Stone Matheson en Unsplash. Video del administrador de tareas, cortesía de Henry Lim