L'API Screen Wake Lock permet d'empêcher les appareils de réduire la luminosité ou de verrouiller l'écran lorsqu'une application doit continuer à fonctionner.
Qu'est-ce que l'API Screen Wake Lock ?
Pour éviter de décharger la batterie, la plupart des appareils passent rapidement en veille lorsqu'ils sont inactifs. Bien que cela ne pose pas de problème la plupart du temps, certaines applications doivent maintenir l'écran allumé pour effectuer leur travail. Par exemple, les applications de cuisine qui montrent les étapes d'une recette ou un jeu comme Ball Puzzle, qui utilise les API de mouvement de l'appareil pour la saisie.
L'API Screen Wake Lock permet d'empêcher l'appareil de réduire la luminosité et de verrouiller l'écran. Cette fonctionnalité permet de proposer de nouvelles expériences qui, jusqu'à présent, nécessitaient une application spécifique à la plate-forme.
L'API Screen Wake Lock réduit le besoin de solutions de contournement peu fiables et potentiellement gourmandes en énergie. Elle corrige les lacunes d'une ancienne API qui se limitait à maintenir l'écran allumé et présentait un certain nombre de problèmes de sécurité et de confidentialité.
Cas d'utilisation suggérés pour l'API Screen Wake Lock
RioRun, une application Web développée par The Guardian, était un cas d'utilisation parfait (mais elle n'est plus disponible). L'application vous emmène dans une visite audio virtuelle de Rio, en suivant le parcours du marathon olympique de 2016. Sans verrouillage de réveil, les écrans des utilisateurs s'éteignent fréquemment pendant la visite, ce qui la rend difficile à utiliser.
Bien sûr, il existe de nombreux autres cas d'utilisation:
- Une application de recettes qui maintient l'écran allumé pendant que vous préparez un gâteau ou un dîner
- Une application de carte d'embarquement ou de billet qui maintient l'écran allumé jusqu'à ce que le code-barres ait été scanné
- Une application de type borne qui maintient l'écran allumé en continu
- Une application de présentation Web qui maintient l'écran allumé pendant une présentation
État actuel
Étape | État |
---|---|
1. Créer un message d'explication | N/A |
2. Créer une première ébauche de la spécification | Fin |
3. Recueillir des commentaires et itérer la conception | Fin |
4. Essai Origin | Terminé |
5. Lancement | Fin |
Utiliser l'API Screen Wake Lock
Types de wakelocks
L'API Screen Wake Lock ne propose actuellement qu'un seul type de wake lock: screen
.
Wakelock screen
Un verrouillage de réveil screen
empêche l'écran de l'appareil de s'éteindre afin que l'utilisateur puisse voir les informations affichées à l'écran.
Obtenir un wakelock d'activation de l'écran
Pour demander un verrouillage de l'écran, vous devez appeler la méthode navigator.wakeLock.request()
qui renvoie un objet WakeLockSentinel
.
Vous transmettez à cette méthode le type de verrouillage de réveil souhaité en tant que paramètre, qui actuellement se limite à 'screen'
et est donc facultatif.
Le navigateur peut refuser la requête pour diverses raisons (par exemple, si le niveau de charge de la batterie est trop faible). Il est donc recommandé d'encapsuler l'appel dans une instruction try…catch
.
En cas d'échec, le message de l'exception contient plus de détails.
Libérer un wakelock d'activation de l'écran
Vous devez également disposer d'un moyen de libérer le verrouillage de l'écran, ce qui se fait en appelant la méthode release()
de l'objet WakeLockSentinel
.
Si vous ne stockez pas de référence à WakeLockSentinel
, il n'est pas possible de déverrouiller manuellement le verrouillage, mais il sera libéré une fois que l'onglet actuel sera invisible.
Si vous souhaitez libérer automatiquement le verrouillage de l'écran après un certain temps, vous pouvez utiliser window.setTimeout()
pour appeler release()
, comme illustré dans l'exemple ci-dessous.
// 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);
L'objet WakeLockSentinel
possède une propriété appelée released
qui indique si une sentinelle a déjà été libérée.
Sa valeur est initialement false
et passe à true
une fois qu'un événement "release"
est distribué. Cette propriété permet aux développeurs Web de savoir quand un verrouillage a été libéré afin qu'ils n'aient pas besoin de le suivre manuellement.
Elle est disponible à partir de Chrome 87.
Cycle de vie du wakelock de l'écran
Lorsque vous jouez avec la démonstration du verrouillage de l'écran, vous remarquerez que les verrouillages de l'écran sont sensibles à la visibilité de la page. Cela signifie que le wakelock de l'écran sera automatiquement libéré lorsque vous réduirez un onglet ou une fenêtre, ou que vous quittez un onglet ou une fenêtre pour lesquels un wakelock de l'écran est actif.
Pour récupérer à nouveau le wakelock de l'écran, écoutez l'événement visibilitychange
et demandez un nouveau wakelock de l'écran lorsqu'il se produit:
const handleVisibilityChange = async () => {
if (wakeLock !== null && document.visibilityState === 'visible') {
await requestWakeLock();
}
};
document.addEventListener('visibilitychange', handleVisibilityChange);
Réduire l'impact sur les ressources système
Faut-il utiliser un écran de verrouillage dans votre application ? L'approche que vous adoptez dépend des besoins de votre application. Quoi qu'il en soit, vous devez utiliser l'approche la plus légère possible pour votre application afin de minimiser son impact sur les ressources système.
Avant d'ajouter un verrouillage d'écran à votre application, demandez-vous si vos cas d'utilisation peuvent être résolus avec l'une des solutions alternatives suivantes:
- Si votre application effectue des téléchargements de longue durée, envisagez d'utiliser la récupération en arrière-plan.
- Si votre application synchronise des données à partir d'un serveur externe, envisagez d'utiliser la synchronisation en arrière-plan.
Démo
Consultez la démo de Screen Wake Lock et la source de la démo. Notez que le verrouillage de l'écran est automatiquement libéré lorsque vous passez d'un onglet ou d'une application à une autre.
Wakelocks forçant l'activation de l'écran dans le gestionnaire de tâches de l'OS
Vous pouvez utiliser le gestionnaire de tâches de votre système d'exploitation pour voir si une application empêche votre ordinateur de se mettre en veille. La vidéo ci-dessous montre le moniteur d'activité macOS indiquant que Chrome dispose d'un verrouillage d'écran actif qui maintient le système actif.
Commentaires
Le groupe de la communauté Web Platform Incubator (WICG) et l'équipe Chrome souhaitent connaître vos avis et expériences sur l'API Screen Wake Lock.
Parlez-nous de la conception de l'API
L'API ne fonctionne-t-elle pas comme prévu ? Ou manque-t-il des méthodes ou des propriétés dont vous avez besoin pour implémenter votre idée ?
- Envoyez une demande de problème de spécification dans le dépôt GitHub de l'API Screen Wake Lock ou ajoutez vos commentaires à un problème existant.
Signaler un problème d'implémentation
Avez-vous trouvé un bug dans l'implémentation de Chrome ? Ou l'implémentation est-elle différente de la spécification ?
- Signalez un bug sur https://new.crbug.com. Veillez à inclure autant de détails que possible, à fournir des instructions simples pour reproduire le bug et à définir Components sur
Blink>WakeLock
. Glitch est idéal pour partager des reproductions rapides et faciles.
Afficher la compatibilité avec l'API
Comptez-vous utiliser l'API Screen Wake Lock ? Votre soutien public aide l'équipe Chrome à hiérarchiser les fonctionnalités et montre aux autres fournisseurs de navigateurs à quel point il est essentiel de les prendre en charge.
- Indiquez comment vous prévoyez d'utiliser l'API dans le fil de discussion Discourse de la WICM.
- Envoyez un tweet à @ChromiumDev en utilisant le hashtag
#WakeLock
et indiquez-nous où et comment vous l'utilisez.
Liens utiles
- Spécification Recommandation de candidat | Version préliminaire de l'éditeur
- Démonstration de Screen Wake Lock | Source de la démonstration de Screen Wake Lock
- Bug de suivi
- Enregistrement sur ChromeStatus.com
- Essayer l'API Wake Lock
- Composant clignotement:
Blink>WakeLock
Remerciements
Image principale de Kate Stone Matheson sur Unsplash. Vidéo sur le gestionnaire de tâches, avec l'aimable autorisation de Henry Lim.