Introduction
En tant que développeurs Web, nous avons tendance à nous passionner pour les nouvelles technologies qui nous permettent de créer des pages Web toujours plus attrayantes et interactives. Des graphismes 3D avec WebGL ? Absolument. Vous avez des fonctionnalités audio avancées avec WebAudio ? D'accord. Des applications de collaboration en temps réel utilisant la webcam et le micro ? Ça me plaît !
Les technologies qui nous permettent de créer des applications plus efficaces et offrant une meilleure expérience utilisateur globale sont moins intéressantes, mais tout aussi importantes. C'est là qu'une API telle que PageVisibility entre en jeu.
L'API Page Visibility exécute une fonction simple, mais importante : elle permet à votre application de savoir à quel moment 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 sur un serveur peut ralentir son cycle de mise à jour lorsqu'elle n'est pas activement affichée
- Une page qui affiche un carrousel d'images en rotation ou un contenu vidéo/audio peut être mise en pause jusqu'à ce que l'utilisateur la réaffiche
- Une application peut décider d'afficher des notifications à l'utilisateur uniquement lorsqu'elle n'est pas visible.
Au premier abord, cette API peut ne pas sembler très utile au-delà du confort des utilisateurs, mais compte tenu de l'augmentation considérable de la navigation sur le Web mobile, tout ce qui permet d'économiser la batterie de l'appareil devient très important. Grâce à l'API PageVisibility, votre site peut permettre à l'appareil de l'utilisateur de consommer moins d'énergie et de durer plus longtemps.
À l'heure où nous écrivons ces lignes, la spécification de l'API se trouve dans l'étape de recommandation de candidat. Elle fournit les deux propriétés permettant de détecter l'état de visibilité du document, ainsi qu'un événement permettant de répondre aux changements 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 (si vous êtes un peu impatient, n'hésitez pas à passer directement à ceux-ci).
Propriétés de visibilité des documents
La version actuelle de la spécification PageVisibilityAPI définit deux propriétés du document: la valeur booléenne hidden et l'énumération visibilityState. La propriété visibilityState a actuellement quatre valeurs possibles: hidden, visible, prerender et unloaded.
Comme vous pouvez vous y attendre, l'attribut masqué renvoie la valeur "true" lorsque le document n'est pas du tout visible. En général, cela signifie que le document est réduit, qu'il s'affiche sur un onglet en arrière-plan, que l'écran de verrouillage du système d'exploitation est activé, etc. La valeur de l'attribut est "false" si une partie du document est au moins partiellement visible sur au moins un écran. De plus, pour tenir compte des outils d'accessibilité, l'attribut masqué 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 les préfixes spécifiques au fournisseur, je vais utiliser des fonctions d'assistance afin d'isoler les spécificités du navigateur. Dès que la prise en charge du navigateur Android 4.4 sera abandonnée, vous pourrez supprimer cette partie et conserver les 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 voir si le document est visible.
function isHidden() {
var prop = getHiddenProp();
if (!prop) return false;
return document[prop];
}
Pour obtenir un affichage plus précis 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 entièrement masqué.visible: le document est au moins partiellement visible sur au moins un appareil d'affichage.prerender: le document est chargé hors de l'écran et n'est pas visible (cette valeur est facultative ; elle n'est pas nécessairement compatible avec tous les navigateurs).unloaded: si le document doit être déchargé, cette valeur est renvoyée. Cette valeur est facultative et elle n'est pas nécessairement compatible avec tous les navigateurs.
Événement VisibilityChange
En plus des propriétés de visibilité, un événement de modification de la visibilité 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é
La création d'une application Web de qualité implique bien plus que l'utilisation de fonctionnalités accrocheuses que les utilisateurs peuvent voir et interagir. Pour qu'une application de grande qualité utilise les ressources et l'attention de l'utilisateur de façon réfléchie, l'API Page Visibility joue un rôle important. Pour en savoir plus sur la création d'applications Web économes en ressources, consultez nos autres articles sur les performances.