Page Viewable API verwenden

Ernest Delgado
Ernest Delgado
X

Einführung

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

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

Die Page Visibility API erfüllt eine einfache, aber wichtige Funktion: Sie informiert Ihre Anwendung darüber, wann eine Seite für den Nutzer sichtbar ist. Anhand dieser grundlegenden Informationen können Webseiten erstellt werden, die sich anders verhalten, wenn sie nicht angezeigt werden. Hier einige Beispiele:

  • Bei einer Webseite, die Informationen von einem Server abruft, kann der Aktualisierungsvorgang verlangsamt werden, wenn die Seite nicht aktiv aufgerufen wird.
  • Eine Seite mit einem rotierenden Bildkarussell oder Video-/Audioinhalten kann pausiert werden, bis der Nutzer die Seite wieder aufruft.
  • Eine Anwendung kann festlegen, dass Benachrichtigungen dem Nutzer nur angezeigt werden, wenn die App ausgeblendet ist.

Auf den ersten Blick scheint diese API nicht sehr nützlich zu sein, abgesehen von der Nutzerfreundlichkeit. Angesichts des enormen Anstiegs des mobilen Websurfens ist jedoch alles, was dazu beiträgt, den Akku des Geräts zu schonen, sehr wichtig. Mithilfe der PageVisibility API kann Ihre Website dazu beitragen, dass das Gerät des Nutzers weniger Strom verbraucht und länger hält.

Unterstützte Browser

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

Quelle

Die API-Spezifikation, die sich derzeit in der Phase der Kandidatenempfehlung befindet, bietet sowohl Eigenschaften zum Erkennen des Sichtbarkeitsstatus des Dokuments als auch ein Ereignis, um auf Sichtbarkeitsänderungen zu reagieren.

In diesem Tutorial stelle ich die Grundlagen der API vor und zeige, wie sie in einigen praktischen Beispielen angewendet werden kann. Wenn Sie es eilig haben, können Sie direkt zu den Beispielen springen.

Eigenschaften für die Sichtbarkeit von Dokumenten

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

Wie zu erwarten, gibt das Attribut „hidden“ den Wert „true“ zurück, wenn das Dokument überhaupt nicht sichtbar ist. Das bedeutet in der Regel, dass das Dokument minimiert ist, sich auf einem Hintergrundtab befindet oder der Sperrbildschirm des Betriebssystems aktiv ist. 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“ 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 anbieterspezifischen Präfixen liegt, verwende ich einige Hilfsfunktionen, um die browserspezifischen Elemente zu isolieren. Sobald Sie die Unterstützung für den Browser von Android 4.4 eingestellt haben, 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 plattformübergreifende Funktion namens isHidden() schreiben, um zu prüfen, ob das Dokument sichtbar ist.

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

    return document[prop];
}

Mit dem Attribut „visibilityState“ können Sie die Sichtbarkeit des Dokuments genauer analysieren. Diese Property gibt einen der folgenden vier Werte zurück:

  • hidden: das Dokument ist vollständig ausgeblendet
  • visible: Das Dokument ist auf mindestens einem Bildschirmgerät mindestens teilweise sichtbar.
  • prerender: Das Dokument wird außerhalb des Bildschirms geladen und ist nicht sichtbar. Dieser Wert ist optional. Nicht alle Browser unterstützen ihn.
  • 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 Ereignis „VisibilityChange“

Zusätzlich zu den Sichtbarkeitseigenschaften gibt es das Ereignis „visibilitychange“, das immer dann ausgelöst wird, wenn sich der Sichtbarkeitsstatus des Dokuments ändert. Sie können einen Ereignis-Listener für dieses Ereignis direkt beim 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 erfordert weit mehr als nur die Verwendung der ausgefeilten, auffälligen Funktionen, die Nutzer sehen und mit denen sie interagieren können. Eine wirklich gute Anwendung nutzt die Ressourcen und die Aufmerksamkeit der Nutzer mit Bedacht. 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