dans tutoriel

Introduction à l’API Page Visibility

W3C Consortium

Introduction

La spécification Page visibility définit un moyen pour les développeurs de  déterminer la visibilité actuelle d’un document (page) web et d’être averti des changements de visibilité. Le développement traditionnel d’une page web consiste à considérer comme visible toutes les pages web, ce qui peut se traduire par l’utilisation d’une quantité importante de ressources à la fois côté client et côté serveur.

Un exemple intéressant est celui de facebook qui met à jour son fil d’actualité lorsque vous êtes connecté à votre interface. Ce principe se retrouve également sur twitter et surement beaucoup d’autres applications web.

La conception de pages Web avec la connaissance de l’état de visibilité d’une page permet non seulement d’améliorer l’expérience utilisateur, mais également les performances de l’application concernée.

Types d’applications

Prenons l’exemple d’un client de messagerie sur le web, un webmail, qui peut vérifier la présence ou non de nouveaux messages stockés sur un serveur distant et ce toutes les secondes lorsque votre page est dans l’état « visible ». Par contre, si la page est dans un état « hidden » (caché), la vérification des messages ne se fera qu’une fois toutes les minutes.

On peut prendre également l’exemple d’un jeu en ligne qui peut être mis en pause lorsque l’utilisateur n’a plus visible sur la page (changement d’onglet, ordinateur en veille, …) .

En outre, cette interface peut être utilisée par les annonceurs pour ne pas facturer des annonces qui ne seraient pas visibles pour les utilisateurs.

On voit bien avec ces exemples l’intérêt d’utiliser cet API. On gagne en performance (côté serveur) tout en conservant une bonne expérience utilisateur.


Utilisation de l’API

Revenons à notre webmail. Voici comment on implémenterait l’interface Page Visibility

Exemple d’utilisation de l’API Page Visibility
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 
<!DOCTYPE html> <html>  <head>   <script>    var timer = 0;    var PERIOD_VISIBLE = 1000; // 1 secondes    var PERIOD_NOT_VISIBLE = 60000; // 60 secondes      function onLoad () {        timer = setInterval (checkEmail, isVisible() ? PERIOD_NOT_VISIBLE : PERIOD_VISIBLE);        if (document.addEventListener) document.addEventListener ("visibilitychange", visibilityChanged);    }      function visibilityChanged () {        clearTimeout (timer);        timer = setInterval (checkEmail, isVisible() ? PERIOD_NOT_VISIBLE: PERIOD_VISIBLE);    }      // Retourne un booléen    function isVisible() {      if (typeof document.hidden !== "undefined") {           return document.hidden;       } else if (typeof document.mozHidden !== "undefined") {           return document.mozHidden;      }  else if (typeof document.msHidden !== "undefined") {           return document.msHidden;      } else if (typeof document.webkitHidden !== "undefined") {           return document.webkitHidden;      }    }      checkEmail fonction () {         // Vérification des mails en Ajax+PHP par exemple    }   </script>  </head>  <body onload="onLoad()">  </body> </html>

Références

  • Documentation pour Firefox : 

https://developer.mozilla.org/en-US/docs/DOM/Using_the_Page_Visibility_API



Laisser un commentaire