Optimisation des applications Web à l’aide de l’API de verrouillage de scénario

Voir comment utiliser l’API Wake Lock pour garder un écran ou un système éveillé jusqu’à ce que notre application termine une certaine tâche.

À cette époque où les micro-appareils sans fil comme les PC et les smartphones sont prédominants, une longue durée de vie de la batterie pourrait être l’une des caractéristiques les plus importantes que tout appareil sans fil peut avoir.

Pour obtenir une longue durée de vie de la batterie, les fabricants de systèmes d’exploitation (OS) comme Microsoft, Google et Apple ont ajouté divers mécanismes d’économie d’énergie à leurs OS qui limitent l’utilisation des ressources informatiques lorsque l’appareil n’en a pas besoin activement. Ils peuvent s’allumer automatiquement lorsque l’appareil est inactif ou que la batterie est faible ou allumée manuellement si vous devez enregistrer la batterie ou l’énergie.

Un verrouillage de sillage est un moyen de garder notre écran ou notre système éveillé lors de l’utilisation d’une application qui les oblige à rester éveillés pour terminer sa tâche et pour une expérience utilisateur satisfaisante.

Dans ce guide, nous explorerons les serrures de sillage, leurs types et l’API Wake Lock. Nous allons créer une application simple qui nous aidera à comprendre leur comportement automatique, à les acquérir, à les libérer et à les réagir lorsqu’ils sont perdus. À la fin de ce guide, nous devrions être en mesure d’utiliser l’API Wake Lock pour contrôler lorsque l’écran d’un utilisateur peut diminuer, éteindre ou verrouiller lorsqu’il utilise notre application Web.

Condition préalable

Pour suivre ce guide, vous devez vous familiariser avec JavaScript.

Support de navigateur

Depuis janvier 2025, l’API de lock-verrou d’écran est pris en charge dans tous les principaux navigateurs, notamment Chrome, Edge, Firefox et Safari.

Locks de réveil et leurs types

Comme indiqué précédemment, les fabricants de systèmes d’exploitation ont des fonctionnalités intégrées à leurs OSE pour aider les appareils sans fil à obtenir une durée de vie de la batterie plus longue. Cela consiste à limiter l’utilisation de l’écran et du système (CPU) pendant les temps d’inactivité.

Un système d’exploitation peut diminuer, verrouiller ou éteindre l’affichage de l’écran pendant les temps d’inactivité ou lorsque la batterie est faible pour prolonger la durée de vie de la batterie de l’appareil. Pour le processeur (système), ils peuvent réduire la vitesse de l’horloge du CPU, gazéger le processeur et limiter le traitement d’arrière-plan.

Lorsque vous considérez «Wake Lock» comme une phrase anglaise sur les ordinateurs, vous imaginez que ce serait un mécanisme qui maintient les ordinateurs éveillés. Si vous pensez cela, vous avez raison! Les verrous de Wake sont des processus qui empêchent l’écran et / ou les capacités de calcul d’un appareil de se coucher pour optimiser l’expérience utilisateur dans les applications Web.

Imaginez-vous en écoutant une chanson et en visionnant ses paroles sur Spotify, et une minute dans la chanson, pendant que vous lisez les paroles et chantez, votre écran de téléphone devient sombre. Dans sa tentative de sauvegarder votre batterie, votre téléphone éteint l’écran car il a été une minute et vous n’avez pas interagi avec l’écran. À quel point serait-ce frustrant? Maintenant, vous devez déverrouiller votre téléphone et remonter dix secondes à la chanson pour continuer à chanter.

L’utilisation d’un verrouillage de sillage optimise l’expérience utilisateur en annulant temporairement ce que les fabricants du système d’exploitation ont fait pour économiser l’énergie.

Il existe deux types de serrures de réveil:

• Verrouillage de sillage d’écran
• Système Wake Lock

Le verrouillage du réveil de l’écran, lorsqu’il est acquis avec succès, empêche le système d’exploitation de tuer, de partir ou de verrouiller l’écran même lorsque l’appareil est inactif ou que la batterie est faible.

Le verrouillage du sillage du système, lorsqu’il est acquis avec succès, empêche le système d’exploitation de réduire la vitesse d’horloge du processeur, de lier le processeur ou de limiter le traitement d’arrière-plan même lorsque l’appareil est inactif ou que la batterie est faible.

Dans ce guide, nous ne discuterons que du type de verrouillage de sillage d’écran, car c’est le seul type de verrouillage de sillage que l’API Lock Wake fournit actuellement.

Cas d’utilisation

Nous utilisons un verrouillage de sillage d’écran pour éviter les interruptions d’écran lors de l’exécution d’applications qui nécessitent l’écran pour rester en marche pour une bonne expérience utilisateur.

Voici quelques exemples de lorsque nous devons garder l’écran éveillé:

• Regarder un compte à rebours en direct
• Regarder un film sur un lecteur vidéo
• Écouter de la musique et voir les paroles
• Navigation de routes avec une application de carte comme Google Maps
• Timing du visage ou appel vidéo
• Affichage des données en temps réel comme les mises à jour des prix boursiers
• Utilisation des applications d’entraînement
• Enregistrement d’écran ou présentant un PowerPoint
• Lire un ebook ou un article comme celui-ci

Construisons une simple démo

Dans cet article, nous allons construire un simple compte à rebours. La minuterie commencera par le clic d’un bouton, suivie d’une acquisition d’un verrouillage de sillage d’écran. Nous publierons le verrouillage de sillage de l’écran lorsque le compte à rebours sera terminé.

Nous illustrons également les cas où les verrous d’écran peuvent être automatiquement publiés. L’objectif est de montrer l’utilisation du verrouillage de sillage d’écran dans une application sans interaction avec l’appareil, mais l’écran rester est crucial pour une bonne expérience utilisateur.

Configuration du projet

Créez d’abord un dossier. Vous pouvez le nommer comme vous voulez. Je nommerai le mien screen-wake-lock-demo.

Ouvrez n’importe quel éditeur de texte de votre choix, c’est-à-dire du code Visual Studio. Trouvez le dossier que vous avez créé à l’intérieur de l’éditeur de texte et ouvrez-le. Dans l’éditeur de texte, créez un fichier nommé demo.html et ajoutez ce qui suit:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Screen Wake Lock Demo</title>
  </head>
  <body>
    <h1>Demo - Countdown with Screen Wake Lock</h1>
  </body>
</html>

Maintenant, ouvrez le demo.html fichier dans n’importe quel navigateur Web de votre choix, et vous devriez voir une page comme celle ci-dessous.

Configuration du compte à rebours

Ajoutons un button élément pour démarrer le compte à rebours et un paragraphe pour contenir un affichage de texte du compte à rebours. Chaque balise a des attributs d’ID que nous utiliserons pour référencer dans le DOM.

Nous allons également ajouter un script qui exécute toutes nos tâches souhaitées. Vous pouvez créer un fichier différent pour le script ou l’écrire en ligne comme indiqué ci-dessous.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Screen Wake Lock Demo</title>
  </head>
  <body>
    <h1>Demo - Countdown with Screen Wake Lock</h1>
    <button id="beginCountdown">Begin Countdown</button>
    <p id="countdown">Countdown...</p>
    <script>
      let countdownDOM = document.getElementById("countdown");
      let beginCountdownDOM = document.getElementById("beginCountdown");
      let interval = null;
      let wakeLock = null;
      const beginCountdown = () => {};
      beginCountdownDOM.addEventListener("click", beginCountdown);
    </script>
  </body>
</html>

Dans le code ci-dessus, nous créons d’abord des variables qui font référence aux éléments DOM. Ensuite, nous créons la fonction beginCountdown qui commence le compte à rebours et sera déclenché par le click Écouteur d’événements sur le beginCountdown bouton.

Nous désactivons le bouton lorsqu’il est cliqué pour éviter d’écraser un compte à rebours actif. Ensuite, nous avons configuré une minuterie qui s’exécute chaque seconde en utilisant le setInterval fonction. Le rappel descend le compte à rebours de 20 secondes et ne s’arrête que lorsque le compte à rebours est à zéro.

Si vous vous dirigez vers votre navigateur, vous devriez voir ceci:

Le wakelocksentinel

Le WakeLockSentinel est un objet renvoyé lorsque nous acquérons avec succès un verrouillage de sillage en appelant l’API Wake Lock. Il s’agit d’une interface avec le verrouillage de sillage acquis, nous donnant un accès à son statut, ses propriétés et ses méthodes.

Le WakeLockSentinel Contient trois propriétés:

1. onrelease: Une méthode qui se déclenche lorsque le verrouillage de sillage est automatiquement libéré.
2. released: Une valeur booléenne qui indique si le verrouillage de sillage d’écran est actif. FAUX signifie qu’il est actif, tandis que True signifie que le verrouillage de sillage n’est pas actif.
3. type: Une chaîne qui nous indique le type de verrouillage de sillage d’écran appliqué, qui peut être un écran ou un système.

S’il n’y a pas de cas du WakeLockSentinelil ne peut y avoir aucune interaction ultérieure avec le verrouillage de sillage acquis. Cela signifie qu’il n’y a aucun moyen d’effectuer une autre action sur le verrouillage du sillage, comme la libération du verrouillage de sillage; Nous devons permettre la publication du verrouillage de sillage automatiquement en éliminant le document (onglet de clôture).

Voici comment initialiser une référence pour le WakelockSentinel:

let wakeLock = null;

Acquérir un verrouillage d’écran

Pour acquérir un verrouillage de sillage d’écran, nous devons d’abord le demander. Demander un verrouillage de sillage demande au système d’exploitation d’appliquer le verrou (par défaut, aucun verrouillage n’est appliqué). Le système d’exploitation accorde qui demande à acquérir un verrouillage de sillage uniquement si le document est visible. Un document non visible actuellement ne peut pas acquérir un verrouillage de sillage.

Il est important de noter que l’API de lock-verrou d’écran n’est disponible que lorsqu’il est servi sur HTTPS. Ceci est courant parmi les API Web populaires.

Maintenant, écrivons une fonction qui demande un verrouillage de sillage d’écran et l’acquiert avec succès. Nous devons créer une fonction asynchrone qui demande le verrouillage de sillage car l’API de verrouillage de Wake renvoie une promesse.

let statusDOM = document.getElementById("status");
const requestWakeLock = async () => {
  try {
    wakeLock = await navigator.wakeLock.request("screen");
    statusDOM.textContent = "Wake lock status: Active";
  } catch (err) {
    console.error(`Failed to request wake lock: ${err.name}, ${err.message}`);
  }
};

Ici, nous appelons navigator.wakeLock.requestqui prend le type de verrouillage de sillage souhaité comme le seul paramètre. Ceci est facultatif car, comme indiqué précédemment, l’API de lock-verbal est limité à screen pour l’instant.

Le navigator.wakeLock.request Renvoie un WakeLockSentinel objet que nous stockons dans le wakeLock référence que nous venons de créer. Si cela échoue, notre catch L’instruction Exception sortira le nom d’erreur et le message dans la console. Sinon, nous afficherons que le verrouillage de sillage a été acquis et appliqué avec succès.

Libérer un verrouillage de sillage d’écran

La libération d’un verrouillage de sillage d’écran, en revanche, indique au système d’exploitation de revenir à son état par défaut de ne pas appliquer le verrouillage de sillage d’écran. Assez simple!

Maintenant, créons une fonction qui fait cela.

const releaseWakeLock = () => {
  if (wakeLock) {
    wakeLock.release();
    wakeLock = null;
    statusDOM.textContent = "Wake lock status: Released";
  }
};

Dans le code ci-dessus, nous avons publié le verrouillage d’écran en annulant tout ce que nous avons fait pour l’acquérir.

Si vous avez fait tout cela correctement, vous devriez avoir ceci:

Comportement automatique des verrous de sillage d’écran

Comme mentionné précédemment, les verrous de sillage d’écran ont certaines conditions qui doivent être remplies avant de pouvoir être acquises et appliquées dans une application Web. L’une de ces conditions est que la page Web qui a acquis le verrouillage de sillage doit être visible, ce qui signifie visibilityState doit être réglé sur true.

Le verrouillage de sillage se rejette automatiquement lorsque visibilitystate devient falsece qui se produit lorsque vous minimisez ou passez à un onglet ou à une fenêtre où un verrouillage de sillage d’écran est appliqué et actif.

Ce comportement automatique peut présenter deux questions: comment savons-nous quand un verrouillage de sillage se retire automatiquement, et comment pouvons-nous le réagir?

Eh bien, voici comment:

wakeLock.addEventListener("release", async () => {
  console.log("screen wake lock was released");
});

L’auditeur d’événements ci-dessus écoute le onrelease Événement du wakelocksentinel, et lorsque la valeur est définie sur truecela nous dit que le sillage a été libéré.

document.addEventListener("visibilitychange", async () => {
  if (document.visibilityState === "visible" && wakeLock !== null) {
    console.log("document is visible, reacquiring wake lock");
    await requestWakeLock();
  }
});

Ce bloc de code écoute d’abord le visibilityChange événement, et la fonction de rappel vérifie un visiblityState état du document, qui, lorsqu’il est défini à truenous permet de réagir la serrure de sillage perdue.

Conclusion

Les verrous de sillage d’écran sont appliqués dans nos applications Web de tous les jours, et elles sont si courantes que vous êtes plus susceptible de remarquer leur absence que leur présence dans les applications Web lorsque vous vous attendez à un temps d’écran ininterrompu.

De Spotify à YouTube en passant par les lecteurs vidéo sur chaque site Web, le fait d’avoir des serrures de scénographie à l’écran appliqués à des pages spécifiques d’applications Web est attendue de chaque site Web qui tente de fournir une bonne expérience utilisateur. Ce guide vous fournit des connaissances suffisantes sur les serrures de sillage et leurs types et le processus de les appliquer à toute application Web pour optimiser l’expérience de l’utilisateur.