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? Jetzt anmelden

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 angesehen wird.
  • Eine Seite mit einem rotierenden Bildkarussell oder Video-/Audioinhalt kann pausiert werden, bis der Nutzer die Seite erneut aufruft.
  • Eine App 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 werden die Grundlagen der API behandelt und anhand einiger Beispiele aus der Praxis gezeigt, wie sie angewendet wird. Sie können sie gerne überspringen, wenn Sie ungeduldig sind.

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. Normalerweise bedeutet das, 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 Android 4.4-Browser eingestellt haben, 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 eine browserü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 Anzeigegerät zumindest 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 unbedingt 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 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

Das Erstellen einer guten Webanwendung erfordert weit mehr als nur die Verwendung von auffälligen Funktionen, die Nutzende sehen und mit denen sie interagieren können. Eine wirklich großartige Anwendung nutzt die Ressourcen und Aufmerksamkeit des Nutzers rücksichtsvoll und das Page Visibility API ist ein wichtiger Teil dieses Puzzles. Weitere Informationen zum Erstellen ressourcenbewusster Webanwendungen finden Sie in anderen leistungsbezogenen Artikeln.

Externe Referenzen