Page Visibility API – HTML5 APIs

Wir kennen alle das Problem mit den Tabs: Man hat immer gefühlte 50 offen. Bei den 49 davon laufen Aktionen ab, die man als Besucher in dem Moment gar nicht mitbekommt. Damit meine ich automatisierte Slider, AJAX-Abfragen und andere coole Dinge. Das Problem dabei ist, dass diese unnötige Last erzeugen (client- aber auch serverseitig), auch wenn der Benutzer es nicht sieht. Und hier kann das Page Visibility API von HTML5 helfen. Mit dem Page Visibility API kann man auslesen, ob die Seite im Moment sichtbar ist.

Mit dieser relativ neuen Schnittstelle ist es ganz einfach möglich zu erkennen, ob der Besucher in der Lage ist den Inhalt zu sehen. Sichtbar ist in dem Fall nur die Seite, die im aktiven Tab/Fenster offen ist. Als nicht sichtbar gelten Browserfenster, die minimiert sind oder die inaktiven Tabs.

Attribute

Das API erweitert das document Objekt um zwei weitere Attribute:

  • hidden (boolean)
    Ist die Seite sichtbar, so wird false zurückgegeben. Andernfalls true.
  • visibilityState (visible|hidden|prerender)
    visibilityState gibt etwas detaillierte Informationen zu dem aktuellen Status aus. So ist es außerdem möglich zu erkennen, wenn die Seite gerade geladen wird.

Events

Zur Überwachung der Sichtbarkeit wird lediglich ein Event zur Verfügung gestellt:

  • visibilitychange
    Dieses Event wird gefeuert, wenn der Sichtbarkeitsstatus sich ändert.

Page Visibility API im Einsatz

Kommen wir zu dem praktischen Teil. Beim Aufruf der Seite logge ich den Sichtbarkeitsstatus in der Konsole. Anschließend überwache ich den Status und logge bei Veränderungen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function logVisibility() {
  if (document.visibilityState == "visible" || document.webkitVisibilityState == "visible") {
    console.log("Seite ist sichtbar.");
  } else if (document.visibilityState == "hidden" || document.webkitVisibilityState == "hidden") {
    console.log("Seite ist unsichtbar.");
  } else if (document.visibilityState == "prerender" || document.webkitVisibilityState == "prerender") {
    console.log("Seite wird geladen.");
  }
}
 
logVisibility();
 
document.addEventListener("visibilitychange", logVisibility, false);
document.addEventListener("webkitvisibilitychange", logVisibility, false);

Beispiel: http://jsfiddle.net/abogomolov/BJv7Y/

Fazit

Wie man sieht, kann man im Handumdrehen prüfen, ob der Benutzer die Website sieht oder nicht. Ist die Seite für den Benutzer nicht sichtbar, dann kann man auf die zahlreichen Anfragen per AJAX verzichten und den Server damit entlasten. Auch Videos kann man stoppen und Animationen deaktivieren, da diese sowieso nicht sichtbar sind.

ALL-INKL.COM

Ein Kommentar zu dem Artikel “Page Visibility API – HTML5 APIs”