Rester activé avec l'API Screen Wake Lock

L'API Screen Wake Lock permet d'empêcher les appareils d'assombrir ou de verrouiller l'écran lorsqu'une application doit continuer à s'exécuter.

Pete LePage
Thomas Steiner

Qu'est-ce que l'API Screen Wake Lock ?

Pour éviter de décharger la batterie, la plupart des appareils se mettent rapidement en veille lorsqu'ils ne sont pas inactif. Bien que cela ne pose pas de problème la plupart du temps, certaines applications doivent conserver le l’écran allumé pour terminer son travail. Exemples : applications de cuisine qui montrent les étapes d'une recette ou d'un jeu comme Ball Puzzle, qui utilise API de mouvement pour l'entrée.

L'API Screen Wake Lock permet d'empêcher la diminution de la luminosité de l'appareil. et le verrouillage de l'écran. Ce offre 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 piratages des solutions épuisantes et gourmandes en énergie. Il corrige les inconvénients d'une ancienne API qui se limitait au simple fait de garder l'écran allumé et comportait un certain nombre les 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 (bien qu'il ne soit plus disponible). L'application vous emmène faire une visite audio virtuelle de Rio, tout au long de l'année 2016 du marathon olympique. Sans wakelocks, les utilisateurs les écrans s'éteindaient fréquemment pendant la lecture de la visite, ce qui le rend difficile à utiliser.

Bien entendu, il existe bien d'autres cas d'utilisation:

  • Une application de recettes qui maintient l'écran allumé pendant que vous faites un gâteau ou que vous cuisinez dîner
  • Une application de carte d'embarquement ou de billetterie qui conserve l'écran jusqu'à ce que le code-barres ait été scanné
  • Une application de type kiosque qui maintient l'écran allumé en permanence
  • Une application de présentation Web qui conserve l'écran lors d'une présentation

État actuel

Étape État
1. Créer une vidéo explicative N/A
2. Créer l'ébauche initiale de la spécification Fin
3. Recueillir les commentaires et itérer la conception Fin
4. Phase d'évaluation Terminé
5. Lancement Fin

Utiliser l'API Screen Wake Lock

Types de wakelocks

L'API Screen Wake Lock ne fournit actuellement qu'un seul type de wakelock: screen.

Wakelocking screen

Un wakelock screen empêche l'écran de l'appareil de tourner afin que l'utilisateur puisse voir les informations qui s'affichent à l'écran.

Obtenir le wakelock en cas d'activation de l'écran

Pour demander un wakelock en cas d'écran, vous devez appeler la méthode navigator.wakeLock.request(). qui renvoie un objet WakeLockSentinel. Vous transmettez à cette méthode le type de wakelock souhaité en tant que paramètre, qui, actuellement, est limité à 'screen' et qui est donc facultatif. Le navigateur peut refuser la requête pour diverses raisons (par exemple, parce que le niveau de charge de la batterie est trop faible), Il est donc recommandé d'encapsuler l'appel dans une instruction try…catch. Le message de l'exception contiendra plus de détails en cas d'échec.

Libérer un wakelock d'écran

Vous avez également besoin d'un moyen de libérer le wakelock de l'écran, qui s'obtient en appelant la méthode Méthode release() de l'objet WakeLockSentinel. Si vous ne stockez pas de référence à WakeLockSentinel, il est impossible pour déverrouiller manuellement le verrouillage, mais il sera libéré une fois que l'onglet actif sera invisible.

Si vous souhaitez déverrouiller automatiquement le wakelock de l'écran après un certain délai, 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, puis passe à true une fois une "release" l'événement est déclenché. Cette propriété aide les développeurs Web à savoir quand un verrouillage ont été publiés afin qu'ils n'aient pas besoin d'en effectuer le suivi manuellement. Il est disponible à partir de Chrome 87.

Cycle de vie du wakelock pour l'écran

En jouant avec la démonstration de l'activation de l'écran de démarrage, vous remarquerez que les wakelocks forçant l'activation de l'écran sont sensibles à la visibilité des pages. Cela signifie que le wakelock verrouillé de l'écran est automatiquement libérée lorsque vous réduisez onglet ou fenêtre, ou quittez un onglet ou une fenêtre où un wakelock est activé.

Pour récupérer le wakelock de l'écran, procédez comme suit : écouter l'événement visibilitychange et demander un nouveau wakelock d'écran lorsque cela se produit:

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

document.addEventListener('visibilitychange', handleVisibilityChange);

Réduisez votre impact sur les ressources système

Devez-vous utiliser un wakelock en cas d'écran dans votre application ? L'approche à adopter dépend des besoins de votre application. Quoi qu’il en soit, vous devez utilisez l'approche la plus légère possible pour minimiser sur les ressources système.

Avant d'ajouter un wakelock en cas d'écran à votre application, demandez-vous si vos cas d'utilisation être résolu par l'une des solutions alternatives suivantes:

Démo

Consultez la démonstration de l'écran de démarrage et la source de démonstration. Notez que le wakelock est automatiquement libéré lorsque vous changez d'onglet. ou des applications.

Wakelocks forçant l'activation de l'écran dans le gestionnaire de tâches du système d'exploitation

Vous pouvez utiliser le gestionnaire de tâches de votre système d'exploitation pour voir si une application empêche votre ordinateur de passer en mode veille. La vidéo ci-dessous présente le Moniteur d'activité ce qui indique que Chrome dispose d'un wakelock actif pour l'écran qui maintient le système activé.

Commentaires

Web Platform Incubator Community Group (WICG) et l'équipe Chrome s'intéressent à idées et expériences avec l'API Screen Wake Lock.

Présentez-nous la conception de l'API

Y a-t-il un aspect de l'API qui ne fonctionne pas comme prévu ? Ou s'il manque des méthodes ou des propriétés dont vous avez besoin pour mettre en œuvre votre idée ?

Signaler un problème d'implémentation

Avez-vous détecté un bug dans l'implémentation de Chrome ? Ou l'implémentation différent des spécifications ?

  • Signalez un bug sur https://new.crbug.com. Assurez-vous d'inclure autant détails que possible, fournissez des instructions simples pour reproduire le bug et définissez Composants sur Blink>WakeLock. Glitch fonctionne très bien pour partager des récits rapidement et facilement.

Apportez votre soutien à l'API

Prévoyez-vous d'utiliser l'API Screen Wake Lock ? Votre soutien public aide le L'équipe Chrome classe les fonctionnalités par ordre de priorité et montre aux autres fournisseurs de navigateurs comment il est essentiel de les soutenir.

Liens utiles

Remerciements

Image héros de Kate Stone Matheson sur Unsplash. Vidéo sur le gestionnaire de tâches fournie par Henry Lim