Page Viewable API verwenden

Ernest Delgado
Ernest Delgado
X

Einführung

Als Webentwickler sind wir oft begeistert von neuen Technologien, mit denen wir noch ansprechendere, interaktivere Webseiten erstellen können. 3D-Grafiken mit WebGL? Selbstverständlich. Erweiterte Audiofunktionen mit WebAudio? Na klar. Anwendungen für die Zusammenarbeit in Echtzeit, die die Webcam und das Mikrofon verwenden? Ich bin dabei!

Weniger spannend, aber ebenso wichtig sind die Technologien, mit denen wir Anwendungen erstellen können, die effizienter laufen und eine bessere allgemeine Nutzererfahrung bieten. Hier kommt eine API wie PageVisibility ins Spiel.

Die Page Visibility API hat eine einfache, aber wichtige Funktion: 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 angesehen werden. Hier einige Beispiele:

  • Eine Webseite, die Informationen von einem Server abruft, kann ihren Aktualisierungszyklus verlangsamen, wenn sie nicht aktiv angesehen wird.
  • Eine Seite, auf der ein rotierendes Bildkarussell oder Video-/Audioinhalte angezeigt werden, kann pausiert werden, bis der Nutzer die Seite wieder aufruft.
  • Eine Anwendung kann Benachrichtigungen nur dann anzeigen, wenn sie nicht sichtbar ist.

Auf den ersten Blick mag diese API abgesehen von der Nutzerfreundlichkeit nicht sehr nützlich erscheinen. Angesichts der enormen Zunahme des mobilen Webs ist jedoch alles, was zur Einsparung von Akkuleistung beiträgt, sehr wichtig. Durch die Verwendung der PageVisibility API kann Ihre Website dazu beitragen, dass das Gerät des Nutzers weniger Strom verbraucht und länger hält.

Browser Support

  • Chrome: 33.
  • Edge: 12.
  • Firefox: 18.
  • Safari: 7.

Source

Die API-Spezifikation, die sich zum Zeitpunkt der Erstellung dieses Artikels in der Phase „Candidate Recommendation“ befindet, bietet sowohl Properties zum Erkennen des Sichtbarkeitsstatus des Dokuments als auch ein Ereignis zum Reagieren auf Sichtbarkeitsänderungen.

In dieser Anleitung werden die Grundlagen der API behandelt und es wird gezeigt, wie sie in einigen praktischen Beispielen angewendet wird. Sie können diese Beispiele auch überspringen, wenn Sie ungeduldig sind.

Eigenschaften für die Sichtbarkeit von Dokumenten

In der aktuellen Version der PageVisibilityAPI-Spezifikation werden zwei Dokumenteigenschaften definiert: der boolesche Wert hidden und die Aufzählung visibilityState. Das Attribut „visibilityState“ hat derzeit vier mögliche Werte: hidden, visible, prerender und unloaded.

Wie Sie vielleicht erwarten, gibt das Attribut „hidden“ den Wert „true“ zurück, wenn das Dokument überhaupt nicht sichtbar ist. In der Regel bedeutet dies, dass das Dokument entweder minimiert ist, sich auf einem Hintergrundtab befindet, der Sperrbildschirm des Betriebssystems angezeigt wird usw. Das Attribut wird auf „false“ gesetzt, wenn ein Teil des Dokuments auf mindestens einem Display zumindest teilweise sichtbar ist. Außerdem kann das Attribut „hidden“ für Bedienungshilfen auf „false“ gesetzt werden, wenn ein Tool wie eine Lupe das Dokument vollständig verdeckt, aber eine Ansicht davon zeigt.

Umgang mit Anbieterpräfixen

Damit der Fokus auf dem Code und nicht auf den herstellerspezifischen Präfixen liegt, verwende ich einige Hilfsfunktionen, um die browserspezifischen Details zu isolieren. Sobald Sie den Android 4.4-Browser nicht mehr unterstützen, können Sie diesen Teil entfernen und die Standardnamen verwenden.

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 eine browserübergreifende Funktion isHidden() schreiben, um zu prüfen, ob das Dokument sichtbar ist.

function isHidden() {
    var prop = getHiddenProp();
    if (!prop) return false;

    return document[prop];
}

Wenn Sie eine detailliertere Ansicht der Sichtbarkeit des Dokuments benötigen, können Sie das Attribut „visibilityState“ verwenden. Diese Property gibt einen von vier Werten zurück:

  • hidden: Das Dokument ist vollständig ausgeblendet.
  • visible: Das Dokument ist auf mindestens einem Anzeigegerät zumindest 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 von allen Browsern unterstützt).

Das VisibilityChange-Ereignis

Zusätzlich zu den Sichtbarkeitseigenschaften gibt es ein „visibilitychange“-Ereignis, das immer dann ausgelöst wird, wenn sich der Sichtbarkeitsstatus des Dokuments ändert. Sie können einen Event-Listener für dieses Ereignis direkt im Dokumentobjekt registrieren:

Beispiel für ein Ereignis

// 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

Die Entwicklung einer großartigen Webanwendung umfasst weit mehr als nur die Verwendung von auffälligen, auffälligen Funktionen, die Nutzer sehen und mit denen sie interagieren können. Eine wirklich gute Anwendung geht sorgsam mit den Ressourcen und der Aufmerksamkeit des Nutzers um. Die Page Visibility API ist ein wichtiger Teil dieses Puzzles. Weitere Informationen zum Erstellen ressourcenschonender Webanwendungen finden Sie in unseren anderen leistungsbezogenen Artikeln.

Externe Referenzen