Einleitung
Als Webentwickler sind wir tendenziell begeistert von neuen Technologien, mit denen wir immer ansprechendere, interaktivere Webseiten erstellen können. 3D-Grafiken mit WebGL? Selbstverständlich. Erweiterte Audiofunktionen mit WebAudio? Klar doch. Anwendungen für die Zusammenarbeit in Echtzeit, die die Webkamera und das Mikrofon verwenden? Super, ich bin dabei!
Weniger interessant sind jedoch die Technologien, mit denen wir Anwendungen erstellen können, die effizienter ausgeführt werden und insgesamt eine bessere Nutzererfahrung bieten. Hier kommt eine API wie „Page visibility“ ins Spiel.
Die Page visibility API führt eine einfache, aber wichtige Funktion aus. Sie informiert Ihre Anwendung darüber, wann eine Seite für den Nutzer sichtbar ist. Diese grundlegende Information ermöglicht die Erstellung von Webseiten, die sich anders verhalten, wenn sie nicht angezeigt werden. Hier einige Beispiele:
- Eine Webseite, die Informationen von einem Server abruft, kann den Aktualisierungszyklus verlangsamen, wenn sie nicht aktiv angezeigt wird.
- Eine Seite mit einem rotierenden Bilderkarussell oder Video-/Audioinhalten kann pausiert werden, bis der Nutzer die Seite wieder aufruft.
- Eine App kann festlegen, dass dem Nutzer nur dann Benachrichtigungen angezeigt werden, wenn sie ausgeblendet ist.
Auf den ersten Blick mag diese API nicht sehr nützlich erscheinen, wenn es um den Komfort des Nutzers hinausgeht, aber in Anbetracht der enormen Zunahme des mobilen Surfens im Web ist alles, was die Akkulaufzeit des Geräts spart, sehr wichtig. Mithilfe der Page visibility API kann Ihre Website dazu beitragen, dass das Gerät des Nutzers weniger Energie verbraucht und dadurch länger hält.
Die API-Spezifikation, die sich zum jetzigen Zeitpunkt in der Phase „Candidate Recommendation“ (Kandidatenempfehlung) befindet, bietet sowohl Properties zur Erkennung des Sichtbarkeitsstatus des Dokuments als auch ein Ereignis für die Reaktion auf Sichtbarkeitsänderungen.
In dieser Anleitung werden die Grundlagen der API erläutert. Außerdem zeige ich Ihnen, wie Sie sie auf einige praktische Beispiele anwenden. Falls Sie zu wenig Geduld haben, können Sie diese gerne überspringen.
Eigenschaften der Dokumentsichtbarkeit
Die aktuelle Version der Page visibilityAPI-Spezifikation definiert zwei Dokumenteigenschaften: den booleschen Wert hidden und die Aufzählung visibilityState. Die Eigenschaft „ visibilityState“ hat derzeit vier mögliche Werte: hidden, visible, prerender und unloaded.
Erwartungsgemäß gibt das Attribut „hidden“ den Wert „true“ zurück, wenn das Dokument nicht sichtbar ist. In der Regel bedeutet dies, dass das Dokument entweder minimiert, auf einem Hintergrund-Tab angezeigt wird oder der Sperrbildschirm des Betriebssystems aktiviert ist. Das Attribut wird auf „false“ gesetzt, wenn ein Teil des Dokuments auf mindestens einem Bildschirm zumindest teilweise sichtbar ist. Außerdem kann für Bedienungshilfen das Attribut „hidden“ auf „false“ gesetzt werden, wenn ein Tool wie eine Lupe das Dokument vollständig verdeckt, aber nur angezeigt wird.
Umgang mit Anbieterpräfixen
Damit der Fokus auf dem Code und nicht auf dem anbieterspezifischen Präfix liegt, werde ich einige Hilfsfunktionen verwenden, um die Browser-spezifischen Besonderheiten zu isolieren. Sobald die Unterstützung für den Browser Android 4.4 eingestellt wird, können Sie diesen Teil entfernen und sich an die Standardnamen halten.
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;
}
Beispiel für Dokumenteigenschaften
Jetzt können wir die browserübergreifende Funktion isHidden() schreiben, um zu sehen, ob das Dokument sichtbar ist.
function isHidden() {
var prop = getHiddenProp();
if (!prop) return false;
return document[prop];
}
Um eine detailliertere Ansicht der Sichtbarkeit des Dokuments zu erhalten, können Sie die Eigenschaft „ visibilityState“ verwenden. Diese Eigenschaft gibt einen von vier Werten zurück:
hidden: Das Dokument ist vollständig ausgeblendet.visible: Das Dokument ist auf mindestens einem Anzeigegerät mindestens teilweise sichtbar.prerender: Das Dokument wird außerhalb des Bildschirms geladen und ist nicht sichtbar. Dieser Wert ist optional und wird nicht unbedingt von allen Browsern unterstützt.unloaded: Wenn das Dokument entladen werden soll, wird dieser Wert zurückgegeben. Dieser Wert ist optional und wird nicht unbedingt von allen Browsern unterstützt.
Das Ereignis „Sichtbarkeitsänderung“
Zusätzlich zu den Sichtbarkeitseigenschaften gibt es ein Sichtbarkeitsänderungsereignis, das ausgelöst wird, wenn sich der Sichtbarkeitsstatus des Dokuments ändert. Sie können einen Event-Listener für dieses Ereignis direkt im Dokumentobjekt registrieren:
Ereignisbeispiel
// 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";
}
}
Zusammenfassung
Das Erstellen einer großartigen Webanwendung erfordert weit mehr als nur die Verwendung der auffälligen Funktionen, die Nutzende sehen und mit denen sie interagieren können. Bei einer wirklich großartigen Anwendung werden die Ressourcen und die Aufmerksamkeit der Nutzer sinnvoll genutzt. Weitere Informationen zum Erstellen ressourcenbewusster Webanwendungen finden Sie in unseren anderen Artikeln zur Leistungssteigerung.