Utiliser l'API Page Visibility

Ernest Delgado
Ernest Delgado
X

Introduction

En tant que développeurs Web, nous avons tendance à nous enthousiasmer pour les nouvelles technologies qui nous permettent de créer des pages Web toujours plus attrayantes et interactives. des 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 suis partante !

Moins passionnantes, mais tout aussi importantes, sont les technologies qui nous permettent de créer des applications qui s'exécutent plus efficacement et offrent une meilleure expérience utilisateur globale. C'est là qu'une API comme PageVisibility entre en jeu.

L'API Page Visibility remplit une fonction simple, mais importante : elle permet à votre application de savoir 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 d'un serveur peut ralentir son cycle de mise à jour lorsqu'elle n'est pas consultée activement.
  • Une page qui affiche un carrousel d'images rotatif ou un contenu vidéo/audio peut être mise en pause jusqu'à ce que l'utilisateur l'affiche à nouveau.
  • Une application peut décider d'afficher des notifications à l'utilisateur uniquement lorsqu'elle est masquée.

À première vue, cette API peut ne pas sembler très utile au-delà du confort de l'utilisateur, mais compte tenu de l'augmentation considérable de la navigation Web 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.

Browser Support

  • Chrome: 33.
  • Edge: 12.
  • Firefox: 18.
  • Safari: 7.

Source

La spécification de l'API, qui est actuellement au stade de recommandation candidate, fournit à la fois des propriétés permettant de détecter l'état de visibilité du document et un événement permettant de répondre aux changements de visibilité.

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

Propriétés de visibilité du document

La version actuelle de la spécification PageVisibilityAPI définit deux propriétés de document : la valeur booléenne 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 visible du tout. En général, cela signifie que le document est réduit, qu'il se trouve dans un onglet en arrière-plan, que l'écran de verrouillage de l'OS est affiché, 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 s'adapter aux outils d'accessibilité, l'attribut "hidden" peut être défini sur "false" lorsqu'un outil tel qu'une loupe d'écran masque complètement le document, mais en affiche une vue.

Gérer les préfixes de fournisseurs

Pour que l'attention reste concentrée sur le code plutôt que sur tous les préfixes spécifiques aux fournisseurs, je vais utiliser des fonctions d'assistance pour isoler les spécificités des navigateurs. Dès que vous n'acceptez plus le 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 multi-navigateur, 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é hors é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échargé, cette valeur sera renvoyée (cette valeur est facultative ; tous les navigateurs ne la prennent pas nécessairement en charge).

Événement VisibilityChange

En plus des propriétés de visibilité, il existe un événement visibilitychange qui se déclenche chaque fois que l'état de visibilité du document change. Vous pouvez enregistrer un écouteur d'événements 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é

Pour créer une application Web de qualité, il ne suffit pas d'utiliser des fonctionnalités spectaculaires et attrayantes avec lesquelles les utilisateurs peuvent interagir. Une application de qualité utilise de manière réfléchie les ressources et l'attention de l'utilisateur, et 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