Verrouillage de l'écran en Frontend : Empêcher la mise en veille de l'écran pour une meilleure expérience utilisateur

Dans le paysage numérique actuel, les utilisateurs interagissent avec des applications web et des expériences mobiles sur une vaste gamme d'appareils et de systèmes d'exploitation. Un aspect essentiel pour offrir une expérience utilisateur positive est de s'assurer que l'écran de l'appareil reste actif lorsque c'est nécessaire. L'API Screen Wake Lock offre une solution puissante, permettant aux développeurs d'empêcher l'écran de l'appareil de s'assombrir ou de se verrouiller, améliorant ainsi la convivialité et l'engagement pour les utilisateurs du monde entier.

Comprendre le problème : La mise en veille de l'écran et son impact

Imaginez un utilisateur à Tokyo, au Japon, regardant un long tutoriel vidéo sur sa tablette tout en apprenant une nouvelle compétence. Ou peut-être un médecin à Sao Paulo, au Brésil, consultant des dossiers médicaux sur un appareil mobile lors d'une consultation. Si l'écran de l'appareil s'assombrit ou se verrouille en pleine session, cela peut perturber l'expérience utilisateur, provoquant de la frustration et pouvant entraîner une perte d'engagement. Ce problème est particulièrement prononcé dans des applications telles que :

• Lecteurs vidéo : La lecture vidéo en continu nécessite que l'écran reste actif.
• Plateformes d'e-learning : Maintenir la visibilité de l'écran est essentiel pendant les leçons et les quiz.
• Applications de navigation : Garder l'écran allumé pendant la navigation est crucial pour la sécurité et la facilité d'utilisation.
• Applications médicales : Les médecins et les infirmières ont besoin que les écrans soient visibles lors de la consultation d'informations sur les patients ou pendant les procédures.
• Jeux interactifs : Le jeu prolongé nécessite que l'écran reste allumé.

Le comportement par défaut de la plupart des appareils consiste à assombrir l'écran après une période d'inactivité pour économiser la batterie. Bien que cela soit souvent souhaitable, cela devient un obstacle à l'utilisabilité dans des applications spécifiques. L'API Screen Wake Lock fournit aux développeurs les moyens de contourner ce comportement par défaut, en s'assurant que l'écran reste actif lorsque c'est nécessaire.

Présentation de l'API Screen Wake Lock

L'API Screen Wake Lock est une API web qui fournit un mécanisme permettant aux applications web d'empêcher l'écran de l'appareil de s'assombrir ou de se verrouiller. Elle est conçue pour être une solution respectueuse de la vie privée et conviviale, permettant aux développeurs de demander des verrouillages de l'écran uniquement lorsque c'est vraiment nécessaire. L'API est basée sur le principe du consentement de l'utilisateur et est implémentée dans la plupart des navigateurs modernes, y compris Chrome, Firefox et Edge.

Concepts clés

• `navigator.wakeLock` : Cette propriété donne accès à l'API Screen Wake Lock.
• `request()` : Cette méthode est utilisée pour demander un verrouillage de l'écran. Elle prend un type de verrouillage comme argument (actuellement, seul 'screen' est pris en charge).
• `release()` : Cette méthode libère un verrouillage de l'écran précédemment acquis.
• Types de verrouillage : L'API prend en charge différents types de verrouillages. Actuellement, le seul type pris en charge est 'screen'. À l'avenir, l'API pourrait potentiellement prendre en charge d'autres types, tels que des verrouillages du processeur ou de l'appareil.

Mise en œuvre de l'API Screen Wake Lock

La mise en œuvre de l'API Screen Wake Lock implique quelques étapes simples. Explorons les étapes clés avec un exemple de code pour illustrer le processus.

1. Vérification de la prise en charge de l'API

Avant d'essayer d'utiliser l'API, il est crucial de vérifier si le navigateur de l'utilisateur la prend en charge. Cela peut être fait en vérifiant l'existence de la propriété `navigator.wakeLock` :

            if ('wakeLock' in navigator) {
  // L'API Screen Wake Lock est prise en charge
  console.log('L\'API Screen Wake Lock est prise en charge !');
} else {
  // L'API Screen Wake Lock n'est pas prise en charge
  console.log('L\'API Screen Wake Lock n\'est pas prise en charge.');
}

            

              
                Copy
              
            
          

2. Demander un verrouillage de l'écran

Le cœur de l'implémentation consiste à demander un verrouillage de l'écran en utilisant la méthode `request()`. Cette méthode renvoie une Promesse qui se résout avec un objet `WakeLockSentinel` si la demande réussit. L'objet `WakeLockSentinel` fournit des informations sur le verrouillage et permet sa libération.

Voici comment demander un verrouillage de l'écran :

            
let wakeLock = null;

async function requestWakeLock() {
  try {
    wakeLock = await navigator.wakeLock.request('screen');
    console.log('Verrouillage de l'écran acquis !');
    wakeLock.addEventListener('release', () => {
      console.log('Verrouillage de l'écran libéré !');
    });
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
    // Gérer l'erreur, par ex., afficher un message d'erreur à l'utilisateur.
  }
}

            

              
                Copy
              
            
          

Dans ce code :

• Nous définissons une variable `wakeLock` pour contenir l'objet `WakeLockSentinel`.
• Nous utilisons une fonction `async` `requestWakeLock()` pour gérer la nature asynchrone de l'API.
• Nous appelons `navigator.wakeLock.request('screen')` pour demander un verrouillage de l'écran.
• Si la demande réussit, nous affichons un message dans la console.
• Nous attachons un écouteur d'événement `release` à l'objet `wakeLock` pour détecter quand le verrouillage est libéré (par ex., en raison de la fermeture de l'onglet ou de la navigation de l'utilisateur).
• Nous incluons une gestion des erreurs pour gérer les échecs potentiels, tels que les problèmes d'autorisation ou le manque de prise en charge.

3. Libérer le verrouillage de l'écran

Il est essentiel de libérer le verrouillage de l'écran lorsqu'il n'est plus nécessaire. Cela peut être fait en utilisant la méthode `release()` de l'objet `WakeLockSentinel`. C'est particulièrement important pour préserver la durée de vie de la batterie et respecter les paramètres de l'appareil de l'utilisateur.

Voici comment libérer le verrouillage de l'écran :

            
function releaseWakeLock() {
  if (wakeLock) {
    wakeLock.release().then(() => {
      console.log('Verrouillage de l'écran libéré !');
      wakeLock = null;
    });
  }
}

            

              
                Copy
              
            
          

Dans ce code :

• Nous vérifions si un verrouillage existe.
• Nous appelons `wakeLock.release()` pour libérer le verrouillage. La méthode `release()` renvoie une `Promise` qui se résout lorsque le verrou est libéré.
• Nous affichons un message dans la console pour indiquer la libération.
• Nous définissons `wakeLock` sur `null` pour indiquer que le verrou a été libéré.

La fonction `releaseWakeLock()` doit être appelée lorsque l'application n'a plus besoin que l'écran reste allumé. Cela pourrait être déclenché par :

• L'utilisateur fermant l'onglet ou quittant la page.
• L'application terminant une tâche qui nécessitait que l'écran soit actif (par ex., fin de la lecture vidéo).
• L'utilisateur demandant explicitement de libérer le verrouillage (par ex., via un bouton).

4. Intégration avec la logique de l'application

L'implémentation doit être intégrée dans la logique spécifique de l'application. Par exemple, dans un lecteur vidéo, vous pourriez demander le verrouillage lorsque la vidéo commence à jouer et le libérer lorsque la vidéo est en pause ou se termine. Dans une plateforme d'e-learning, vous pourriez demander le verrouillage pendant une leçon et le libérer lorsque l'utilisateur navigue vers une autre section. Le moment de la demande et de la libération du verrouillage est essentiel pour une bonne expérience utilisateur.

Voici un exemple hypothétique d'intégration dans un lecteur vidéo :

            
const videoElement = document.getElementById('myVideo');
const playButton = document.getElementById('playButton');
const pauseButton = document.getElementById('pauseButton');

let wakeLock = null;

async function requestWakeLock() {
  try {
    wakeLock = await navigator.wakeLock.request('screen');
    console.log('Verrouillage de l'écran acquis !');
    wakeLock.addEventListener('release', () => {
      console.log('Verrouillage de l'écran libéré !');
      wakeLock = null;
    });
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
}

function releaseWakeLock() {
  if (wakeLock) {
    wakeLock.release().then(() => {
      console.log('Verrouillage de l'écran libéré !');
      wakeLock = null;
    });
  }
}

playButton.addEventListener('click', () => {
  videoElement.play();
  requestWakeLock();
});

pauseButton.addEventListener('click', () => {
  videoElement.pause();
  releaseWakeLock();
});

videoElement.addEventListener('ended', () => {
  releaseWakeLock();
});

            

              
                Copy
              
            
          

Dans cet exemple de lecteur vidéo :

• Le verrouillage de l'écran est demandé lorsque la lecture de la vidéo commence (`playButton.addEventListener`).
• Le verrouillage de l'écran est libéré lorsque la vidéo est mise en pause (`pauseButton.addEventListener`).
• Le verrouillage de l'écran est également libéré lorsque la vidéo se termine (`videoElement.addEventListener('ended')`).

Bonnes pratiques et considérations

La mise en œuvre efficace de l'API Screen Wake Lock implique de respecter les bonnes pratiques pour garantir une expérience utilisateur positive et respectueuse de la vie privée. Voici quelques considérations clés :

1. Consentement de l'utilisateur et transparence

Soyez toujours transparent avec les utilisateurs sur la raison pour laquelle vous utilisez l'API Screen Wake Lock. Communiquez clairement la raison pour laquelle vous empêchez la mise en veille de l'écran. Envisagez de fournir un interrupteur ou un paramètre qui permet aux utilisateurs de contrôler si le verrouillage de l'écran est actif. Cela donne aux utilisateurs le pouvoir et le contrôle sur le comportement de leur appareil. Dans les juridictions du monde entier, le respect du consentement de l'utilisateur est de plus en plus important dans la législation sur la protection des données.

2. Utilisation contextuelle

Ne demandez le verrouillage de l'écran que lorsque c'est vraiment nécessaire. Évitez de l'utiliser sans discernement, car cela peut avoir un impact négatif sur la durée de vie de la batterie et ennuyer les utilisateurs. Tenez compte du contexte de l'activité de l'utilisateur. Par exemple, si un utilisateur lit un article dans une application d'actualités, un verrouillage de l'écran pourrait ne pas être nécessaire, mais s'il regarde une vidéo intégrée dans l'article, cela pourrait être approprié.

3. Libération appropriée

Assurez-vous que le verrouillage de l'écran est toujours libéré lorsqu'il n'est plus nécessaire. C'est crucial pour préserver la durée de vie de la batterie et respecter les préférences de l'utilisateur. Utilisez des écouteurs d'événements (par ex., `visibilitychange`, `beforeunload`, `pagehide`) pour détecter lorsque l'utilisateur quitte la page ou ferme l'onglet et libérez le verrouillage en conséquence.

4. Gestion des erreurs

Mettez en place une gestion des erreurs robuste pour gérer les problèmes potentiels, tels que les erreurs d'autorisation ou les incompatibilités de navigateur. Informez l'utilisateur si la demande de verrouillage de l'écran échoue et fournissez des options alternatives si nécessaire. Fournir des messages d'erreur utiles dans différentes langues serait bénéfique pour un public mondial.

5. Consommation de la batterie

Soyez attentif à la consommation de la batterie. Bien que l'API Screen Wake Lock soit conçue pour être économe en batterie, garder l'écran allumé en continu videra inévitablement la batterie plus rapidement que de laisser l'appareil se mettre en veille. Concevez votre application pour qu'elle soit efficace d'autres manières, comme l'optimisation de la lecture vidéo et la réduction de l'utilisation du processeur, afin de minimiser l'impact global sur la durée de vie de la batterie.

6. Considérations sur l'accessibilité

Pensez aux utilisateurs handicapés. Assurez-vous que votre implémentation est accessible aux utilisateurs ayant des besoins différents. Par exemple, offrez des moyens alternatifs aux utilisateurs pour contrôler le verrouillage de l'écran s'ils ont des difficultés à utiliser les commandes standard. Testez votre application avec des lecteurs d'écran et d'autres technologies d'assistance pour garantir la compatibilité. Suivre les Directives pour l'accessibilité des contenus Web (WCAG) est essentiel pour une utilisabilité mondiale.

7. Tests sur divers appareils et navigateurs

Testez votre implémentation sur une variété d'appareils et de navigateurs pour garantir la compatibilité et un comportement cohérent. Différents appareils et navigateurs peuvent avoir des stratégies de gestion de l'alimentation et un comportement de l'écran variables. Les tests multi-navigateurs sont cruciaux pour atteindre un public mondial. La meilleure approche consiste à tester sur différentes plateformes et systèmes d'exploitation, y compris Android, iOS, Windows, macOS et Linux.

8. Détection de fonctionnalités

Utilisez toujours la détection de fonctionnalités pour vérifier la disponibilité de l'API Screen Wake Lock avant d'essayer de l'utiliser. Cela garantit que votre application se dégrade gracieusement et ne plante pas si l'API n'est pas prise en charge par le navigateur de l'utilisateur.

Exemples concrets et applications mondiales

L'API Screen Wake Lock a de nombreuses applications dans divers secteurs et cas d'utilisation. Voici quelques exemples pour illustrer sa pertinence pratique :

• Santé : Les professionnels de la santé dans les hôpitaux et les cliniques de divers pays, comme en Inde et au Nigeria, peuvent utiliser cette API pour garder les systèmes de surveillance des patients ou les interfaces des appareils médicaux visibles pendant les procédures.
• Éducation : Les plateformes d'apprentissage en ligne, telles que celles utilisées par les étudiants au Canada ou en Australie, peuvent s'assurer que l'écran reste actif pendant les leçons interactives, les quiz et les conférences vidéo.
• Industrie manufacturière : Les ouvriers d'usine en Allemagne ou au Japon peuvent utiliser cette API pour garder les tableaux de bord de surveillance de la production visibles sur des tablettes ou d'autres appareils, évitant ainsi les interruptions de production.
• Transport : Les chauffeurs de camion aux États-Unis ou le personnel de livraison au Brésil peuvent garder les applications de navigation actives sur leurs appareils.
• Fitness : Les utilisateurs en France ou en Corée du Sud peuvent utiliser cette API pour les trackers de fitness pendant les entraînements.
• Kiosques interactifs : Les kiosques interactifs dans les espaces publics de pays comme le Royaume-Uni ou la Chine garderont leurs écrans actifs pour engager les utilisateurs.

Avantages et inconvénients

Avantages

• Expérience utilisateur améliorée : Offre une expérience fluide en empêchant l'assombrissement ou le verrouillage de l'écran.
• Utilisabilité améliorée : Rend les applications plus utilisables dans les situations où l'écran doit rester actif.
• Compatibilité multiplateforme : Fonctionne sur différents navigateurs et appareils.
• Axée sur la confidentialité : Conçue en tenant compte de la vie privée de l'utilisateur et nécessite son consentement.

Inconvénients

• Consommation de la batterie : Garder l'écran allumé peut vider la batterie plus rapidement.
• Gêne pour l'utilisateur : Peut ennuyer les utilisateurs si elle est utilisée de manière inappropriée ou sans transparence.
• Prise en charge par les navigateurs : Nécessite une prise en charge par le navigateur (bien que largement disponible dans les navigateurs modernes).
• Problèmes potentiels d'autorisations : Peut être soumise à des demandes d'autorisation sur certaines plateformes.

Alternatives et considérations

Bien que l'API Screen Wake Lock offre une solution directe, il existe des approches alternatives et des considérations que les développeurs pourraient explorer.

1. `setInterval()` et mises à jour périodiques

Avant l'introduction de l'API Screen Wake Lock, certains développeurs utilisaient `setInterval()` pour mettre à jour périodiquement le contenu ou envoyer un signal au serveur, empêchant l'appareil de passer en mode veille. Cependant, cette approche peut être moins fiable et plus gourmande en ressources. Elle peut également être perçue comme une solution de contournement plutôt qu'une solution bien définie.

2. `requestFullscreen()` et expériences immersives

Pour les applications qui impliquent un mode plein écran, l'API `requestFullscreen()` pourrait indirectement empêcher la mise en veille de l'écran sur certains appareils. Cependant, ce n'est pas un comportement garanti et peut varier en fonction de l'appareil et du navigateur. Elle se concentre principalement sur l'affichage en plein écran plutôt que sur la gestion du comportement de mise en veille de l'écran.

3. Paramètres au niveau du système d'exploitation

Les utilisateurs peuvent généralement ajuster les paramètres de délai d'expiration de l'écran de leur appareil dans le système d'exploitation (par ex., Windows, macOS, Android, iOS). Les développeurs devraient informer les utilisateurs que le comportement de mise en veille de l'écran est géré par les paramètres de l'appareil. Idéalement, les développeurs devraient utiliser l'API et laisser l'utilisateur décider d'activer/désactiver le verrouillage de l'écran en fournissant un interrupteur ou un paramètre.

4. API de gestion de l'alimentation (perspectives d'avenir)

L'API Screen Wake Lock est encore en évolution. Les améliorations futures pourraient inclure un contrôle plus granulaire sur le comportement de l'écran, comme la possibilité de contrôler la luminosité ou le niveau d'assombrissement. L'API pourrait s'intégrer à d'autres API de gestion de l'alimentation, telles que des API capables de surveiller et de réagir à l'état énergétique de l'appareil, pour créer des expériences utilisateur mieux optimisées.

Accessibilité et Internationalisation

Pour un public mondial, garantir l'accessibilité et l'internationalisation (i18n) est primordial. L'API Screen Wake Lock elle-même n'a pas d'impact direct sur l'accessibilité ou l'internationalisation. Cependant, la manière dont vous intégrez cette API dans votre application a un impact direct.

Considérations sur l'accessibilité

• Navigation au clavier : Assurez-vous que tous les contrôles (par ex., boutons, cases à cocher) sont accessibles via le clavier.
• Lecteurs d'écran : Vérifiez que les technologies d'assistance, comme les lecteurs d'écran, fournissent des informations précises sur l'état actuel de l'application. L'événement `release` devrait être annoncé par le lecteur d'écran.
• Contraste des couleurs : Suivez les directives WCAG pour garantir un contraste suffisant entre le texte et l'arrière-plan pour une meilleure lisibilité.
• Texte alternatif : Utilisez un texte alternatif approprié pour toutes les images et graphiques.
• Attributs ARIA appropriés : Utilisez des attributs ARIA (par ex., `aria-label`, `aria-describedby`) pour fournir des informations supplémentaires aux technologies d'assistance.

Considérations sur l'internationalisation

• Traduction : Traduisez tout le texte et les éléments de l'interface utilisateur dans les langues prises en charge par votre application. Utilisez une bibliothèque de traduction robuste et assurez un encodage correct des caractères (UTF-8).
• Formatage de la date et de l'heure : Formatez les dates et les heures en fonction des paramètres régionaux de l'utilisateur. Utilisez des bibliothèques telles que `Intl` pour le formatage de la date/heure.
• Formatage des nombres : Formatez les nombres, y compris les devises, en fonction des paramètres régionaux de l'utilisateur.
• Prise en charge de droite à gauche (RTL) : Si vous prenez en charge des langues qui s'écrivent de droite à gauche (par ex., arabe, hébreu), assurez-vous que la mise en page de votre application est correctement adaptée.
• Formatage des devises : Gérez les symboles monétaires et le formatage de manière appropriée en fonction de la région de l'utilisateur.

Conclusion : Améliorer l'expérience utilisateur à l'échelle mondiale

L'API Screen Wake Lock offre un outil précieux pour les développeurs frontend qui cherchent à améliorer les expériences utilisateur sur une variété d'applications web et d'environnements mobiles. En comprenant les capacités de l'API, en suivant les bonnes pratiques et en l'intégrant judicieusement dans vos projets, vous pouvez créer des applications plus engageantes, conviviales et accessibles à l'échelle mondiale.

En abordant de manière proactive le comportement de mise en veille de l'écran, vous pouvez éviter les interruptions et améliorer l'expérience utilisateur globale, que vos utilisateurs se trouvent à Londres, Pékin ou Lagos. N'oubliez pas de toujours prioriser le consentement de l'utilisateur, d'assurer la transparence et de libérer rapidement le verrouillage de l'écran lorsqu'il n'est plus nécessaire pour garantir une approche respectueuse et responsable.

À mesure que les technologies web continuent d'évoluer, l'API Screen Wake Lock deviendra probablement encore plus essentielle pour créer des applications web modernes capables d'offrir des expériences fluides, engageantes et accessibles à l'échelle mondiale pour les utilisateurs du monde entier. Adoptez la puissance de cette API et créez de meilleures expériences web pour vos utilisateurs dans le monde entier !