Inzwischen haben sich Tabs in Browsern durchgesetzt und werden von jedem Internet-Nutzer oft und gerne benutzt. Viele User schließen Websites wie Facebook, Google Mail oder weitere gar nicht mehr – sie lassen sie im Hintergrund weiterlaufen. Durch die HTML5 Visibility API ist es dem Webworker nun möglich abzufragen, ob die eigene Website gerade sichtbar bzw. unsichtbar für den Benutzer ist und ermöglicht es darauf zu reagieren.
Wofür kann man die Page Visibility API nutzen?
Gerade bei ajax- und medienlastigen Websites ist es keine Seltenheit, dass permanent Daten vom Server geladen werden, um die Seite, ohne das Eingreifen des Benutzers, aktuell zu halten. Mit der Page Visibility API kann verhindert werden, dass unnötige Requests abgesendet werden, wenn der Internet-User die Website gar nicht mehr im Blickfeld hat. Einige Beispiele für eine mögliche Anwendung:
- Ein News-Portal auf dem alle 30 Sekunden via Ajax neue Nachrichten gepusht werden. Hat der User die Seite 15 Minuten im Hintergrund geöffnet, würde man dem Server durch die Nutzung der API 30 sinnlose Requests ersparen.
- Ein Video auf YouTube wird abgespielt und der Nutzer verlässt den Tab. Es wäre möglich nun das Video zu stoppen und erst dann wieder abzuspielen wenn der User den Tab wieder aktiviert hat.
- Eine Seite mit Bilder-Slideshow, die alle paar Sekunden vom Server neue Bilder bezieht und diese lädt. Es wäre nützlich dies zu stoppen, um dem User unnötigen Datentransfer zu ersparen, deren Ergebnis er ohnehin nicht sieht.
Wie teste ich ob meine Website gerade sichtbar ist?
Über die Variable document.hidden erfährt man ob die Seite gerade sichtbar ist. Man erhält entweder true oder false als Wert. Zu Beachten ist hier, dass es wie bei experimentellen CSS-Eigenschaften, Vendor-Prefixe gibt. Diese lauten für Webkit document.webkitHidden, für den Firefox document.mozHidden und für den Internet Explorer document.msHidden. Sofern der Browser die API nicht unterstützt wird als Wert undefined geliefert.
Detailliertere Informationen erhält man allerdings über document.visibilityState (Vendor-Prefixe document.webkitVisibilityState, document.mozVisibilityState bzw. document.msVisibilityState). Derzeit definierte Rückgabewerte sind:
visible
Die Website ist zumindest teilweise sichtbar. Das bedeutet, dass sie zumindest in einem Browser gerade aktiv in einem Tab geöffnet wird und der Browser nicht minimiert ist.hidden
Die Website ist nicht sichtbar. Das kann zwei Gründe haben: Entweder ist im Browser gerade ein anderer Tab geöffnet oder das Browser-Fenster ist komplett minimiert.prerender
Der Inhalt der Seite wird noch vorgeladen und ist für den Benutzer noch nicht sichtbar. Die Website hat diesen Wert nur zu Beginn und kommt später nie wieder in diesen Zustand zurück.
Es wird ausdrücklich darauf hingewiesen, dass es hier noch mehr mögliche Rückgabe-Werte geben wird. Somit sollte man auch diese Funktion bevorzugen, um detailliertere Informationen zu erhalten.
Veränderungen des Benutzers bemerken
Via Event-Listener visibilitychange kann auf Änderungen der Website-Sichtbarkeit reagieren werden. Auch hier gibt es wieder Vendor-Prefixe: webkitvisibilitychange, mozvisibilitychange und msvisibilitychange. Ein einfaches Beispiel:
function handleVisibilityChange() {
if (document.hidden) {
pauseSimulation();
} else {
startSimulation();
}
}
document.addEventListener("visibilitychange", handleVisibilityChange, false);
Ein Beispiel wie das in der Praxis aussehen könnte gibt es hier (Chrome vorrausgesetzt). Einige weitere Code-Beispiele gibt es auf der Google Code Site zur API – Zwei Beispiele zeigen auch die Vorteile der Eigenschaft “prerender” (zum Beispiel das Zählen von Pageviews nur dann, wenn die Seite tatsächlich fertig geladen wurde).
Brauchen wir das und wo geht es jetzt schon?
Die API ist noch in einem sehr frühen Entwicklungsstadium. Folgende Browser unterstützen mit den genannten Vendor-Prefixen schon jetzt diese Funktionen: Chrome ab Version 13, Firefox ab Version 10 (Aurora) und der Internet Explorer auf Version 10 – Für Opera und Safari ist noch keine Implementierung bekannt (Stand 13. November 2011).
Für oben genannte Beispiele bietet die API einen starken Mehrwert und daher ist eine Implementierung in die eigene Website schon jetzt denkbar. Ältere Browser verhalten sich wie bisher, moderne bieten eine verbesserte Funktion. Ein klassisches Beispiel für Graceful degradation mit HTML5 – so soll es sein.
Weiterführende Links:
- Mozilla: Using the Page Visibility API
- Google Chrome Labs: Page Visibility API
- IE-Blog: Page Visibility API
Dieser Artikel erschien in der Februar/März-Ausgabe des PHP-Magazins.