Utiliser l'API Page Visibility

Ernest Delgado

Introduction

En tant que développeurs Web, nous sommes souvent enthousiastes à l'égard des nouvelles technologies qui nous permettent de créer des pages Web toujours plus attrayantes et interactives. Graphismes 3D avec WebGL ? Absolument. Fonctionnalités audio avancées avec WebAudio ? Pas de souci. Applications de collaboration en temps réel utilisant la webcam et le micro ? Je m'inscris !

Les technologies qui nous permettent de créer des applications qui s'exécutent plus efficacement et offrent une meilleure expérience utilisateur globale sont moins intéressantes, mais elles sont tout aussi importantes. C'est là qu'une API comme PageVisibility intervient.

L'API Page Visibility remplit une fonction simple, mais importante : elle indique à votre application quand une page est visible par l'utilisateur. Cette information de base permet de créer des pages Web qui se comportent différemment lorsqu'elles ne sont pas consultées. Voici quelques exemples:

• Une page Web qui récupère des informations auprès d'un serveur peut ralentir son cycle de mise à jour lorsqu'elle n'est pas activement consultée.
• Une page affichant un carrousel d'images en rotation ou un contenu vidéo/audio peut être mise en pause jusqu'à ce que l'utilisateur affiche à nouveau la page.
• Une application peut décider d'afficher des notifications à l'utilisateur uniquement lorsqu'elle est masquée.

Au premier abord, cette API peut sembler peu utile au-delà de la commodité pour l'utilisateur. Toutefois, compte tenu de l'augmentation considérable de la navigation Web sur mobile, tout ce qui permet d'économiser la batterie de l'appareil devient très important. En utilisant l'API PageVisibility, votre site peut aider l'appareil de l'utilisateur à consommer moins d'énergie et à durer plus longtemps.

La spécification de l'API, qui en date de ce jour est en phase de recommandation candidate, fournit à la fois des propriétés pour détecter l'état de visibilité du document et un événement pour répondre aux modifications de visibilité.

Dans ce tutoriel, je vais vous présenter les principes de base de l'API et vous montrer comment l'appliquer à des exemples pratiques (n'hésitez pas à passer directement aux exemples si vous êtes impatient).

Propriétés de visibilité des documents

La version actuelle de la spécification PageVisibilityAPI définit deux propriétés de document: le booléen hidden et l'énumération visibilityState. La propriété visibilityState comporte actuellement quatre valeurs possibles: hidden, visible, prerender et unloaded.

Comme vous pouvez vous y attendre, l'attribut "hidden" renvoie la valeur "true" lorsque le document n'est pas du tout visible. Cela signifie généralement que le document est réduit, sur un onglet en arrière-plan, que l'écran de verrouillage de l'OS est activé, etc. L'attribut est défini sur "false" si une partie du document est au moins partiellement visible sur au moins un écran. De plus, pour prendre en charge les outils d'accessibilité, l'attribut "hidden" peut être défini sur "false" lorsqu'un outil tel qu'une loupe masque complètement le document, mais en affiche une vue.

Gérer les préfixes de fournisseurs

Pour me concentrer sur le code plutôt que sur tous les préfixes spécifiques au fournisseur, je vais utiliser des fonctions d'assistance pour isoler les éléments spécifiques au navigateur. Dès que vous abandonnez la prise en charge du navigateur Android 4.4, vous pouvez supprimer cette partie et vous en tenir aux noms standards.

function getHiddenProp(){
    var prefixes = ['webkit','moz','ms','o'];

    // if 'hidden' is natively supported just return it
    if ('hidden' in document) return 'hidden';

    // otherwise loop over all the known prefixes until we find one
    for (var i = 0; i < prefixes.length; i++){
        if ((prefixes[i] + 'Hidden') in document)
            return prefixes[i] + 'Hidden';
    }

    // otherwise it's not supported
    return null;
}

Exemple de propriétés de document

Nous pouvons maintenant écrire une fonction multinavigateur, isHidden(), pour vérifier si le document est visible.

function isHidden() {
    var prop = getHiddenProp();
    if (!prop) return false;

    return document[prop];
}

Pour obtenir une vue plus précise de la visibilité du document, vous pouvez utiliser la propriété visibilityState. Cette propriété renvoie l'une des quatre valeurs suivantes:

• hidden: le document est complètement masqué.
• visible: le document est au moins partiellement visible sur au moins un appareil d'affichage.
• prerender: le document est chargé en dehors de l'écran et n'est pas visible (cette valeur est facultative ; tous les navigateurs ne la prennent pas nécessairement en charge).
• unloaded: si le document doit être désinstallé, cette valeur sera renvoyée (cette valeur est facultative et tous les navigateurs ne la prennent pas nécessairement en charge).

Événement VisibilityChange

En plus des propriétés de visibilité, un événement visibilitychange se déclenche chaque fois que l'état de visibilité du document change. Vous pouvez enregistrer un écouteur d'événement pour cet événement directement sur l'objet document:

Exemple d'événement

// use the property name to generate the prefixed event name
var visProp = getHiddenProp();
if (visProp) {
  var evtname = visProp.replace(/[H|h]idden/,'') + 'visibilitychange';
  document.addEventListener(evtname, visChange);
}

function visChange() {
   var txtFld = document.getElementById('visChangeText');

   if (txtFld) {
      if (isHidden())
         txtFld.value += "Tab Hidden!\n";
      else
         txtFld.value += "Tab Visible!\n";
   }
}

Résumé

Créer une application Web de qualité implique bien plus que d'utiliser des fonctionnalités attrayantes et sophistiquées que les utilisateurs peuvent voir et avec lesquelles ils peuvent interagir. Une application vraiment excellente utilise de manière réfléchie les ressources et l'attention de l'utilisateur. L'API Page Visibility est un élément important de ce puzzle. Pour en savoir plus sur la création d'applications Web économes en ressources, consultez nos autres articles sur les performances.

Références externes

• Spécification de l'API PageVisibility W3C
• Groupe de travail "Web Performance Working Group"
• Exemple de PageVisibility dans IE10
• Visibility.js : un polyfill pour PageVisibility
• isVis : autre polyfill PageVisibility