###
Introduction
</p>
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.</p>
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.</p> </p>
</p>
###
###
###
###
###
###
###
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.</p>
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.</p>
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.</p>
</p>
Utilisation de l’API
</p>
Revenons à notre webmail. Voici comment on implémenterait l’interface Page Visibility</p>
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> |
</p>
###
###
Références
- Documentation pour Firefox :
https://developer.mozilla.org/en-US/docs/DOM/Using_the_Page_Visibility_API
- Librairie Visibility.js : https://github.com/ai/visibility.js
*