© saicle/Shutterstock.com
Mit dem HTML5 Visibility API die Seitensichtbarkeit im Browser abfragen

Sehen und gesehen werden


Die Möglichkeit, mehrere Websites gleichzeitig im Browser geöffnet zu halten, hat sich dank Browser-Tabs durchgesetzt. Ein Großteil der Internetnutzer schließt daher beliebte Websites wie Facebook oder Gmail gar nicht mehr – er lässt sie im Hintergrund weiterlaufen. Mit dem HTML5 Visibility API kann der Web-Worker nun abfragen, ob die eigene Website gerade sichtbar bzw. unsichtbar für den Benutzer ist. Welchen Nutzen Entwickler wie User daraus ziehen können, zeigt dieser Artikel.

Dank moderner Webtechnologien ist das statische Internet von früher Geschichte. Während die Webent­wickler langsam aber sicher beginnen sich umzustellen, wird fleißig mit neuen Konzepten am Web der Zukunft geforscht. Viele Entwürfe warten nur mehr darauf von den Browserherstellern implementiert und von Anwendern getestet zu werden. Eines dieser Konzepte ist das Page Visibility API. Gerade bei Ajax- und medienlastigen Websites ist es keine Seltenheit, dass zum Aktualisieren der Seite ohne das aktive Eingreifen des Benutzers permanent Daten vom Server bezogen werden. Mit der neuen HTML5-Schnittstelle kann via JavaScript verhindert werden, dass unnötige Requests abgesetzt werden, wenn der Internetuser die Website gar nicht mehr im Blickfeld hat. Einige mögliche Anwendungsbeispiele:

  • Ein News-Portal, auf dem alle 30 Sekunden via Ajax neue Nachrichten in einen Ticker geladen werden. Hat der User die Seite 15 Minuten im Hintergrund geöffnet, könnte man dem Server durch die Nutzung des API 30 sinnlose Requests ersparen.

  • Ein eingebettetes Video auf einer Website wird abgespielt und der Nutzer verlässt den Tab. Es wäre nun möglich das Video zu stoppen, bis der User den Tab wieder im Sichtfeld hat.

  • Eine Galerie mit einer Bilder-Slideshow, die alle fünf Sekunden vom Server neue Bilder bezieht und lädt. Es wäre nützlich dies zu stoppen, um dem User unnötigen Datentransfer zu ersparen, dessen Ergebnis er ohnehin nicht sieht, wenn er den Tab nicht aktiv geöffnet hat.

Wie teste ich, ob meine Website gerade sichtbar ist?

Das Visibility API zu nutzen, ist einfach: Über die Variable document.hidden erfährt man via JavaScript den Status der Sichtbarkeit. Man erhält entweder true oder false als Rückgabewert (Listing 1). Zu beachten ist hier, dass es, wie bei experimentellen CSS-Eigenschaften, Vendor Prefixes gibt, um die Funktionen schon jetzt in den jeweiligen Browsern zu testen. Diese lauten für WebKit document.webkitHidden, für Firefox document.mozHidden und für Internet Explorer document.ms...

Neugierig geworden?

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang