Gründe für die Blockierung des bfcache überwachen

Zurück-/Vorwärts-Cache (bfcache)

Moderne Browser bieten für die Navigation im Verlauf eine Optimierung namens Zurück-/Vorwärts-Cache (bfcache). Dadurch wird eine bereits besuchte Seite sofort geladen, wenn Benutzer zu ihr zurückkehren. Aus unterschiedlichen Gründen kann verhindert werden, dass Seiten in den bfcache aufgenommen werden, oder sie können aus dem bfcache entfernt werden. Manche dieser Gründe ergeben sich aus einer Spezifikation, andere sind browserspezifisch.

Um die Gründe für eine Blockierung des bfcache überwachen zu können, enthält die Klasse PerformanceNavigationTiming die Eigenschaft notRestoredReasons. Sie gibt ein NotRestoredReasons-Objekt mit Informationen zum obersten Frame und zu allen im Dokument vorhandenen <iframe>s zurück:

• Gründe, aus denen die Verwendung des bfcache verhindert wurde.
• Angaben wie id und name eines Frames, mit denen sich <iframe>s im HTML identifizieren lassen.

Gründe für die Blockierung des bfcache protokollieren

Fortlaufend anfallende Daten zu Blockierungen des bfcache lassen sich mit einem PerformanceObserver erfassen:

const observer = new PerformanceObserver((list) => {
  let perfEntries = list.getEntries();
  perfEntries.forEach((navEntry) => {
    console.log(navEntry.notRestoredReasons);
  });
});

observer.observe({ type: "navigation", buffered: true });

Alternativ können Sie mit einer geeigneten Methode wie Performance.getEntriesByType() zurückliegende Daten zu Blockierungen des bfcache abrufen:

function returnNRR() {
  const navEntries = performance.getEntriesByType("navigation");
  for (let i = 0; i < navEntries.length; i++) {
    console.log(`Navigation entry ${i}`);
    let navEntry = navEntries[i];
    console.log(navEntry.notRestoredReasons);
  }
}

Die oben gezeigten Codebeispiele geben NotRestoredReasons-Objekte in der Konsole aus. Diese Objekte haben die folgende Struktur, die den Blockierungsstatus des obersten Frames darstellt:

{
  "children": [],
  "id": null,
  "name": null,
  "reasons": [{ "reason": "unload-listener" }],
  "src": "",
  "url": "example.com"
}

Die Eigenschaften haben folgende Bedeutung:

children Schreibgeschützt

Ein Array von NotRestoredReasons-Objekten, eines für jedes im aktuellen Dokument eingebettete <iframe>. Sie können Gründe enthalten, aus denen der oberste Frame aufgrund der untergeordneten Frames blockiert wurde. Jedes Objekt hat dieselbe Struktur wie das übergeordnete Objekt. Dadurch lassen sich beliebig viele Ebenen eingebetteter <iframe>s rekursiv darstellen. Hat der Frame keine untergeordneten Frames, ist das Array leer. Befindet sich das Dokument in einem ursprungsübergreifenden <iframe>, gibt children null zurück.

id Schreibgeschützt

Ein String mit dem Wert des Attributs id des <iframe>, das das Dokument enthält (beispielsweise <iframe id="foo" src="...">). Befindet sich das Dokument nicht in einem <iframe> oder ist für das <iframe> kein id gesetzt, gibt id null zurück.

name Schreibgeschützt

Ein String mit dem Wert des Attributs name des <iframe>, das das Dokument enthält (beispielsweise <iframe name="bar" src="...">). Befindet sich das Dokument nicht in einem <iframe> oder ist für das <iframe> kein name gesetzt, gibt name null zurück.

reasons Schreibgeschützt

Ein Array von NotRestoredReasonDetails-Objekten, von denen jedes einen Grund darstellt, aus dem die Seite, zu der navigiert wurde, den bfcache nicht verwenden konnte. Befindet sich das Dokument in einem ursprungsübergreifenden <iframe>, gibt reasons null zurück. Das übergeordnete Dokument kann jedoch "masked" als reason anzeigen, wenn eines der <iframe>s die Verwendung des bfcache für den obersten Frame verhindert hat. Weitere Einzelheiten finden Sie unter Blockierungsgründe.

src Schreibgeschützt

Ein String mit dem Pfad zur Quelle des <iframe>, das das Dokument enthält (beispielsweise <iframe src="exampleframe.html">). Befindet sich das Dokument nicht in einem <iframe>, gibt src null zurück.

url Schreibgeschützt

Ein String mit der URL der Seite oder des <iframe>, zu der beziehungsweise dem navigiert wurde. Befindet sich das Dokument in einem ursprungsübergreifenden <iframe>, gibt url null zurück.

Blockierungen des bfcache in <iframe>s desselben Ursprungs erfassen

Wenn auf einer Seite <iframe>s desselben Ursprungs eingebettet sind, enthält der zurückgegebene Wert von notRestoredReasons in der Eigenschaft children ein Array von Objekten. Diese stellen die Blockierungsgründe für die jeweiligen eingebetteten Frames dar.

Zum Beispiel:

{
  "children": [
    {
      "children": [],
      "id": "iframe-id",
      "name": "iframe-name",
      "reasons": [],
      "src": "./index.html",
      "url": "https://www.example.com/iframe-examples.html"
    },
    {
      "children": [],
      "id": "iframe-id2",
      "name": "iframe-name2",
      "reasons": [{ "reason": "unload-listener" }],
      "src": "./unload-examples.html",
      "url": "https://www.example.com/unload-examples.html"
    }
  ],
  "id": null,
  "name": null,
  "reasons": [],
  "src": null,
  "url": "https://www.example.com"
}

Blockierungen des bfcache in ursprungsübergreifenden <iframe>s erfassen

Wenn auf einer Seite ursprungsübergreifende Frames eingebettet sind, werden nur begrenzt Informationen über sie bereitgestellt, damit keine ursprungsübergreifenden Informationen offengelegt werden. Enthalten sind nur Informationen, die der äußeren Seite bereits bekannt sind, sowie die Angabe, ob der ursprungsübergreifende Teilbaum eine Blockierung des bfcache verursacht hat. Blockierungsgründe und Informationen über tiefer liegende Ebenen des Teilbaums werden nicht bereitgestellt – auch dann nicht, wenn einige dieser Ebenen denselben Ursprung haben.

Zum Beispiel:

{
  "children": [
    {
      "children": [],
      "id": "iframe-id",
      "name": "iframe-name",
      "reasons": [],
      "src": "https://www.example2.com/",
      "url": null
    }
  ],
  "id": null,
  "name": null,
  "reasons": [{ "reason": "masked" }],
  "src": null,
  "url": "https://www.example.com"
}

Für die ursprungsübergreifenden <iframe>s werden keine Blockierungsgründe angegeben. Für den obersten Frame wird "masked" als Grund gemeldet. Dies zeigt an, dass die Gründe aus Datenschutzgründen verborgen bleiben. Beachten Sie, dass "masked" auch verwendet werden kann, um benutzeragentspezifische Gründe zu verbergen. Der Wert weist daher nicht immer auf ein Problem in einem <iframe> hin.

Blockierungsgründe

Eine Blockierung kann viele verschiedene Ursachen haben. Obwohl die Gründe standardisiert sind, sollten Entwickler sich nicht auf deren genaue Formulierung verlassen und darauf vorbereitet sein, dass neue Gründe hinzukommen oder bestehende entfernt werden.

In der Spezifikation sind folgende Werte aufgeführt:

"fetch"

Beim Entladen wurde ein vom aktuellen Dokument gestarteter, noch laufender Abruf (beispielsweise über fetch()) abgebrochen. Die Seite befand sich daher nicht in einem stabilen Zustand, der im bfcache gespeichert werden konnte.

"lock"

Beim Entladen wurden gehaltene Sperren und Sperranforderungen beendet. Die Seite befand sich daher nicht in einem stabilen Zustand, der im bfcache gespeichert werden konnte.

"masked"

Der genaue Grund wird aus Datenschutzgründen verborgen. Dieser Wert kann Folgendes bedeuten:

• Das aktuelle Dokument enthält untergeordnete Dokumente in einem ursprungsübergreifenden <iframe>, die die Speicherung im bfcache verhindert haben.
• Das aktuelle Dokument konnte aus benutzeragentspezifischen Gründen nicht im bfcache gespeichert werden.

"navigation-failure"

Bei der ursprünglichen Navigation, durch die das aktuelle Dokument erstellt wurde, trat ein Fehler auf. Die Speicherung des daraus resultierenden Fehlerdokuments im bfcache wurde verhindert.

"parser-aborted"

Das anfängliche Parsen des HTML für das aktuelle Dokument wurde nie abgeschlossen. Die Speicherung des unvollständigen Dokuments im bfcache wurde verhindert.

"websocket"

Beim Entladen wurde eine offene WebSocket-Verbindung geschlossen. Die Seite befand sich daher nicht in einem stabilen Zustand, der im bfcache gespeichert werden konnte.

In einigen Browsern verhindern aktive WebSockets nicht, dass Seiten in den bfcache aufgenommen werden. In diesen Fällen werden die WebSocket-Verbindungen beim Aufnehmen in den bfcache getrennt und können wiederhergestellt werden, wenn die Seite aus dem Cache geladen wird. Wenn beispielsweise in Chrome eine Seite aus dem bfcache wiederhergestellt wird, löst der Browser die Ereignisse error und close aus. So kann eine Anwendung ihre vorhandene Logik zur erneuten Verbindung mit dem WebSocket ausführen.

Benutzeragentspezifische Blockierungsgründe

Die folgenden zusätzlichen Blockierungsgründe, die von einigen Browsern verwendet werden können, sind ebenfalls spezifiziert:

"audio-capture"

Das Dokument hat über getUserMedia() von Media Capture and Streams mit Audio die Berechtigung zur Audioaufnahme angefordert.

"background-work"

Das Dokument hat Hintergrundarbeit angefordert, indem es die Methode register() von SyncManager, die Methode register() von PeriodicSyncManager oder die Methode fetch() von BackgroundFetchManager aufgerufen hat.

"broadcastchannel-message"

Während die Seite im Zurück-/Vorwärts-Cache gespeichert war, empfing eine BroadcastChannel-Verbindung der Seite eine Nachricht, die ein message-Ereignis auslöste.

"idbversionchangeevent"

Für das Dokument stand beim Entladen ein IDBVersionChangeEvent aus.

"idledetector"

Das Dokument hatte beim Entladen einen aktiven IdleDetector.

"keyboardlock"

Beim Entladen war die Tastatursperre noch aktiv, weil die Methode lock() von Keyboard aufgerufen worden war.

"mediastream"

Ein MediaStreamTrack befand sich beim Entladen im aktiven Zustand.

"midi"

Das Dokument hat durch Aufruf von navigator.requestMIDIAccess() eine MIDI-Berechtigung angefordert.

"modals"

Beim Entladen wurden Dialoge mit Benutzeraufforderungen angezeigt.

"navigating"

Beim Entladen lief noch ein Ladevorgang. Das Dokument befand sich daher nicht in einem Zustand, in dem es im Zurück-/Vorwärts-Cache gespeichert werden konnte.

"navigation-canceled"

Die Navigationsanforderung wurde durch einen Aufruf von window.stop() abgebrochen. Die Seite befand sich nicht in einem Zustand, in dem sie im Zurück-/Vorwärts-Cache gespeichert werden konnte.

"non-trivial-browsing-context-group"

Die Browsing-Context-Gruppe dieses Dokuments enthielt mehr als einen Browsing Context der obersten Ebene.

"otpcredential"

Das Dokument hat ein OTPCredential erstellt.

"outstanding-network-request"

Beim Entladen hatte das Dokument noch ausstehende Netzwerkanforderungen und befand sich nicht in einem Zustand, in dem es im Zurück-/Vorwärts-Cache gespeichert werden konnte.

"paymentrequest"

Das Dokument hatte beim Entladen ein aktives PaymentRequest.

"pictureinpicturewindow"

Das Dokument hatte beim Entladen ein aktives PictureInPictureWindow.

"plugins"

Das Dokument enthielt Plugins.

"request-method-not-get"

Das Dokument wurde durch eine HTTP-Anforderung erstellt, deren Methode nicht GET war.

"response-auth-required"

Das Dokument wurde durch eine HTTP-Antwort erstellt, die eine HTTP-Authentifizierung erforderte.

"response-cache-control-no-store"

Das Dokument wurde durch eine HTTP-Antwort erstellt, deren Cache-Control-Header das Token "no-store" enthielt.

"response-cache-control-no-cache"

Das Dokument wurde durch eine HTTP-Antwort erstellt, deren Cache-Control-Header das Token "no-cache" enthielt.

"response-keep-alive"

Das Dokument wurde durch eine HTTP-Antwort erstellt, die einen Keep-Alive-Header enthielt.

"response-scheme-not-http-or-https"

Das Dokument wurde durch eine Antwort erstellt, deren URL-Schema weder HTTP noch HTTPS war.

"response-status-not-ok"

Das Dokument wurde durch eine HTTP-Antwort erstellt, deren Status kein erfolgreicher Status war.

"rtc"

Beim Entladen wurde eine RTCPeerConnection oder ein RTCDataChannel geschlossen. Die Seite befand sich daher nicht in einem Zustand, in dem sie im Zurück-/Vorwärts-Cache gespeichert werden konnte.

"sensors"

Das Dokument hat Zugriff auf Sensoren angefordert.

"serviceworker-added"

Während sich die Seite im Zurück-/Vorwärts-Cache befand, begann ein Service Worker, den Service-Worker-Client des Dokuments zu steuern.

"serviceworker-claimed"

Während sich die Seite im Zurück-/Vorwärts-Cache befand, wurde der aktive Service Worker des Service-Worker-Clients des Dokuments übernommen.

"serviceworker-postmessage"

Während sich die Seite im Zurück-/Vorwärts-Cache befand, empfing der aktive Service Worker des Service-Worker-Clients des Dokuments eine Nachricht.

"serviceworker-version-activated"

Während sich die Seite im Zurück-/Vorwärts-Cache befand, wurde eine Version des aktiven Service Workers des Service-Worker-Clients des Dokuments aktiviert.

"serviceworker-unregistered"

Während sich die Seite im Zurück-/Vorwärts-Cache befand, wurde die Registrierung des aktiven Service Workers des Service-Worker-Clients des Dokuments aufgehoben.

"sharedworker"

Dieses Dokument gehörte zur Menge der Eigentümer eines SharedWorkerGlobalScope.

"smartcardconnection"

Das Dokument hatte beim Entladen eine aktive SmartCardConnection.

"speechrecognition"

Das Dokument hatte beim Entladen eine aktive SpeechRecognition.

"storageaccess"

Das Dokument hat mithilfe der Storage Access API eine Berechtigung für den Speicherzugriff angefordert.

"unload-listener"

Das Dokument hatte einen Event Listener für das unload-Ereignis registriert.

"video-capture"

Das Dokument hat über getUserMedia() von Media Capture and Streams mit Video die Berechtigung zur Videoaufnahme angefordert.

"webhid"

Das Dokument hat die Methode requestDevice() der WebHID API aufgerufen.

"webshare"

Das Dokument hat die Methode navigator.share() der Web Share API verwendet.

"webtransport"

Beim Entladen wurde eine offene WebTransport-Verbindung geschlossen. Die Seite befand sich daher nicht in einem Zustand, in dem sie im Zurück-/Vorwärts-Cache gespeichert werden konnte.

"webxrdevice"

Das Dokument hat ein XRSystem erstellt.

Browser-Kompatibilität

Siehe auch

• Erläuterung der notRestoredReasons-API
• PerformanceNavigationTiming.notRestoredReasons
• NotRestoredReasons