Page Visibility API

Wenn der Benutzer das Fenster minimiert, zu einem anderen Tab wechselt oder das Dokument vollständig durch ein anderes Fenster verdeckt wird, sendet die API ein visibilitychange-Ereignis, um Listener darüber zu informieren, dass sich der Zustand der Seite geändert hat. Sie können das Ereignis erkennen und einige Aktionen durchführen oder sich anders verhalten. Zum Beispiel kann Ihre Webanwendung, die ein Video abspielt, das Video anhalten, wenn der Benutzer den Tab in den Hintergrund stellt, und die Wiedergabe fortsetzen, wenn der Benutzer zum Tab zurückkehrt. Der Benutzer verliert nicht seinen Platz im Video, der Soundtrack des Videos stört nicht den Ton im neuen Vordergrund-Tab und der Benutzer verpasst nichts vom Video in der Zwischenzeit.

Die Sichtbarkeitszustände eines <iframe> sind die gleichen wie die des übergeordneten Dokuments. Das Verbergen eines <iframe> durch CSS-Eigenschaften (wie display: none;) löst keine Sichtbarkeitsereignisse aus oder ändert den Zustand des Dokuments innerhalb des Rahmens.

Betrachten wir einige Anwendungsfälle für die Page Visibility API.

• Eine Webseite mit einem Bildkarussell sollte nicht zum nächsten Bild wechseln, wenn der Benutzer die Seite nicht ansehen kann.
• Eine Anwendung, die ein Informations-Dashboard zeigt, möchte den Server nicht nach Updates abfragen, wenn die Seite nicht sichtbar ist.
• Eine Webseite möchte Töne ausschalten, wenn ein Gerät im Standby-Modus ist (Benutzer drückt die Taste, um den Bildschirm auszuschalten).

Entwickler haben historisch gesehen unvollkommene Proxys verwendet, um dies zu erkennen. Beispielsweise helfen das Beobachten von blur und focus-Ereignissen auf dem Fenster, zu wissen, wann Ihre Seite nicht die aktive Seite ist, aber sie sagt Ihnen nicht, dass Ihre Seite tatsächlich für den Benutzer verborgen ist. Die Page Visibility API adressiert dieses Problem.

Unabhängig von der Page Visibility API haben Benutzeragenten in der Regel eine Reihe von Richtlinien implementiert, um die Leistungsauswirkungen von Hintergrund- oder ausgeblendeten Tabs zu mildern. Diese können Folgendes umfassen:

• Die meisten Browser stoppen das Senden von requestAnimationFrame()-Callbacks an Hintergrund-Tabs oder verdeckte <iframe>, um die Leistung und die Batterielebensdauer zu verbessern.

• Timer wie setTimeout() werden in Hintergrund-/inaktiven Tabs gedrosselt, um die Leistung zu verbessern. Siehe Gründe für längere als angegebene Verzögerungen für weitere Details.

• Browser implementieren eine budgetbasierte Drosselung von Hintergrund-Timeouts. Dies funktioniert in modernen Browsern auf ähnliche Weise, mit den folgenden Details:

  • In Firefox hat jedes Fenster in Hintergrund-Tabs ein eigenes Zeitbudget in Millisekunden – ein Maximum und ein Minimum von jeweils +50 ms und -150 ms. Chrome ist sehr ähnlich, außer dass das Budget in Sekunden angegeben wird.
  • Fenster unterliegen der Drosselung nach 30 Sekunden, mit den gleichen Regeln für Drosselungsverzögerungen, wie für Fenster-Timer angegeben (siehe wiederum Gründe für längere als angegebene Verzögerungen). In Chrome beträgt dieser Wert 10 Sekunden.
  • Timer-Aufgaben sind nur erlaubt, wenn das Budget nicht negativ ist.
  • Sobald der Code eines Timers fertig ausgeführt wird, wird die Zeitdauer, die er zur Ausführung benötigt hat, vom Timeout-Budget seines Fensters abgezogen.
  • Das Budget regeneriert sich mit einer Rate von 10 ms pro Sekunde, sowohl in Firefox als auch in Chrome.

Einige Prozesse sind von diesem Drosselungsverhalten ausgenommen. In diesen Fällen können Sie die Page Visibility API verwenden, um die Leistungsbelastung der Tabs zu reduzieren, während sie verborgen sind.

• Tabs, die Audio abspielen, werden als Vordergrund betrachtet und nicht gedrosselt.
• Tabs, die Code ausführen, der Echtzeit-Netzwerkverbindungen nutzt (WebSockets und WebRTC), werden nicht gedrosselt, um zu verhindern, dass diese Verbindungen durch ein Timeout geschlossen und unerwartet geschlossen werden.
• IndexedDB-Prozesse werden ebenfalls nicht gedrosselt, um Timeouts zu vermeiden.

Die Page Visibility API fügt den folgenden Eigenschaften zur Document-Schnittstelle hinzu:

Document.hidden Nur lesbar

Gibt true zurück, wenn die Seite in einem Zustand ist, der als für den Benutzer verborgen gilt, und ansonsten false.

Document.visibilityState Nur lesbar

Ein String, der den aktuellen Sichtbarkeitszustand des Dokuments angibt. Mögliche Werte sind:

visible

Der Seiteninhalt kann zumindest teilweise sichtbar sein. In der Praxis bedeutet das, dass die Seite der Vordergrund-Tab eines nicht minimierten Fensters ist.

hidden

Der Inhalt der Seite ist für den Benutzer nicht sichtbar, entweder weil der Tab des Dokuments im Hintergrund ist oder Teil eines minimierten Fensters, oder weil der Bildschirm des Geräts ausgeschaltet ist.

Die Page Visibility API fügt den folgenden Ereignissen der Document-Schnittstelle hinzu:

visibilitychange

Wird ausgelöst, wenn der Inhalt eines Tabs sichtbar geworden ist oder ausgeblendet wurde.

Dieses Beispiel hält die Wiedergabe von Audio an, wenn die Seite ausgeblendet wird, und setzt die Wiedergabe fort, wenn die Seite wieder sichtbar wird. Die Steuerelemente des <audio>-Elements erlauben es dem Benutzer, zwischen Wiedergabe und Pause umzuschalten. Die boolesche Variable playingOnHide wird verwendet, um zu verhindern, dass Audio abgespielt wird, wenn die Seite in einen sichtbaren Zustand wechselt, aber die Medien beim Ausblenden der Seite nicht wiedergegeben wurden.

audio {
  width: 100%;
}

HTML

<audio
  controls
  src="https://mdn.github.io/webaudio-examples/audio-basics/outfoxing.mp3"></audio>

JavaScript

const audio = document.querySelector("audio");

let playingOnHide = false;

document.addEventListener("visibilitychange", () => {
  if (document.hidden) {
    playingOnHide = !audio.paused;
    audio.pause();
  } else {
    // Page became visible! Resume playing if audio was "playing on hide"
    if (playingOnHide) {
      audio.play();
    }
  }
});

Ergebnis

• Document.visibilityState
• Document.hidden
• PerformanceEventTiming: Reporting the First Input Delay (FID)
• Timing element visibility with the Intersection Observer API