Auparavant, nous avions des navigateurs qui ne comportaient pas de navigation par onglets, mais aujourd'hui, lorsque vous regardez tous les navigateurs disponibles, vous pouvez constater que tous les navigateurs le proposent. En tant que programmeur, j'ai normalement 10 à 15 onglets ouverts à la fois, parfois ce nombre dépasse 25-30..

Pourquoi cette API?

Auparavant, il n'était pas possible de déterminer quel onglet était actif ou non, mais avec l'aide de l'API HTML5 Visibility, nous pouvons détecter si notre visiteur regarde notre page Web ou non.. 

Dans ce didacticiel, nous allons comprendre comment utiliser l’API HTML5 Visibility et une simple démonstration permettant de connaître le statut de notre page. Dans cette démonstration, nous allons modifier le titre du document en fonction de l’état de visibilité de la page..

Vérification du statut de visibilité de la page

Avec le lancement de cette API, nous avons accueilli deux nouvelles propriétés de document qui remplissent deux fonctions différentes. Le premier est document.visibilityState et le second est document.hidden.

document.visibilityState contient quatre valeurs différentes qui sont comme ci-dessous:

• caché: La page n'est visible sur aucun écran
• Prérender: La page est chargée hors écran et n'est pas visible pour l'utilisateur
  
• visible: La page est visible
  
• déchargé: La page est sur le point de se décharger (l'utilisateur s'éloigne de la page en cours)
  

document.hidden est la propriété boolean, définie sur false si la page est visible et true si la page est masquée.

Maintenant, nous pouvons contrôler le comportement de nos sites Web lorsque notre site Web est masqué par l'utilisateur..

Nous connaissons immédiatement nos propriétés de disponibilité, mais il est maintenant temps d'écouter l'événement afin de pouvoir être informé de la nouvelle condition de visibilité de la page. Cela se fait via le  visibilitéchanger un événement. Nous verrons une rapide démonstration sur la façon de gérer cet événement..

document.addEventListener ('accessibilitychange', function (event) if (! document.hidden) // La page est visible. else // La page est masquée.);

Ce code est simplement une instance de base d'utilisation de cet événement et de découverte du statut actuel de la page Web. Mais pour vous faire savoir que ces propriétés et cette méthode doivent être utilisées avec le préfixe du fournisseur, car ces événements et ces propriétés ont un préfixe du vendeur dans certains des navigateurs. Maintenant, nous verrons le même code de manière transversale:

// Obtenir la fonction de préfixe de navigateur spécifique getBrowserPrefix () // Vérifie la propriété non préfixée. if ('caché' dans le document) return null;  // Tous les préfixes possibles. var browserPrefixes = ['moz', 'ms', 'o', 'webkit']; pour (var i = 0; i < browserPrefixes.length; i++)  var prefix = browserPrefixes[i] + 'Hidden'; if (prefix in document)  return browserPrefixes[i];   // The API is not supported in browser. return null;  // Get Browser Specific Hidden Property function hiddenProperty(prefix)  if (prefix)  return prefix + 'Hidden';  else  return 'hidden';   // Get Browser Specific Visibility State function visibilityState(prefix)  if (prefix)  return prefix + 'VisibilityState';  else  return 'visibilityState';   // Get Browser Specific Event function visibilityEvent(prefix)  if (prefix)  return prefix + 'visibilitychange';  else  return 'visibilitychange';   

Nous avons toutes les propriétés préfixées du navigateur et l'événement est prêt à être appliqué. Maintenant, nous allons changer notre code précédent en conséquence.

// Obtenir le préfixe du navigateur var prefix = getBrowserPrefix (); var hidden = hiddenProperty (préfixe); var visibilitéState = visibilitéState (préfixe); var VisibilitéEvent = VisibilitéEvent (préfixe); document.addEventListener (visibilitéEvent, fonction (événement) if (! document [hidden]) // La page est visible. else // La page est masquée.);

Où pouvons-nous utiliser cette API?

Il y a un certain nombre de scénarios différents où nous pouvons envisager d'utiliser cette API.

1. Imaginez que vous êtes sur le tableau de bord, la page et la page interroge les détails d'un flux RSS ou d'une API sur un intervalle régulier, par exemple deux minutes. Ainsi, nous pouvons restreindre l’appel au flux RSS ou à l’API si la page n’est pas visible par l’utilisateur (c’est-à-dire si l’utilisateur ne regarde pas la page).
2. Pour et curseur de l'image. nous pouvons limiter le mouvement des images de curseur lorsque la page est masquée.
   
3. De manière similaire, nous pouvons afficher la notification HTML uniquement lorsque la page est masquée par l'utilisateur.
   

Jusqu'ici, nous avons vu du code pour utiliser l'API HTML5 Page Visibility, il est temps d'agir immédiatement..

Manifestation

• Démo 1: Cette démonstration présente l'utilisation de l'API Page Visibility pour modifier le titre de la page. Voir la démo
• Démo 2: Cette démo montre comment nous pouvons limiter les données d'interrogation du serveur lorsque la page est inactive.. 
  

Dans cette démonstration, nous examinerons comment nous pouvons limiter l'interrogation du serveur pour obtenir de nouvelles informations, mais uniquement lorsque l'utilisateur regarde la page. Je suppose que jQuery est déjà inclus dans votre page. Ici, nous n'augmenterons que le nombre, mais ceci peut être remplacé par une véritable interrogation du serveur.

Le HTML

 
0

Le javascript

Voir la démo

Prise en charge du navigateur

Si vous souhaitez consulter la prise en charge du navigateur pour cette API, je vous conseille de consulter Puis-je utiliser?. Mais pour découvrir par programme le support du navigateur, je vous suggère d’utiliser cet article pour détecter le support de diverses fonctionnalités HTML5. Jusqu'à présent, cette API est vraiment prise en charge par la plupart des navigateurs principaux et récents..

Conclusion

Je dirais que nous avons eu une très bonne API qui ne comprenait que deux propriétés et un seul événement. De cette façon, il peut être facilement intégré à votre application existante, ce qui peut avoir une incidence positive sur votre expérience utilisateur. En fin de compte, nous pouvons maintenant contrôler le comportement de nos sites Web lorsque notre site Web est masqué par l'utilisateur.