Request.isHistoryNavigation — Eigenschaft · JavaScript-Referenz

Signatur

get Request.prototype.isHistoryNavigation

Beschreibung

Die Eigenschaft isHistoryNavigation des Interfaces Request ist true, wenn die Anfrage durch eine Navigation im Sitzungsverlauf entstanden ist. Das ist zum Beispiel der Fall, wenn der Nutzer auf „Zurück“ oder „Vor“ klickt oder history.back(), history.forward() bzw. history.go() aufgerufen wird. Bei allen anderen Anfragen ist der Wert false. Dazu gehören normale Link-Klicks, fetch()-Aufrufe und Formularübermittlungen.

Wirklich nützlich ist die Eigenschaft nur in einem Service Worker. Im fetch-Event können Sie mit event.request.isHistoryNavigation Verlaufsnavigationen anders behandeln als neue Navigationen. Ein typisches Beispiel: Beim Zurückspringen soll die Seite so schnell wie möglich aus dem Cache kommen, weil der Nutzer den Zustand erwartet, den er gerade verlassen hat. Bei einer neuen Navigation hat dagegen die aktuelle Version aus dem Netzwerk Vorrang.

Die Eigenschaft ist schreibgeschützt. Im Request-Konstruktor lässt sie sich nicht setzen. Ein selbst erzeugtes new Request(url) liefert deshalb immer false. Kopieren Sie eine Anfrage mit new Request(originalRequest) oder request.clone(), wird der Wert übernommen.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn die Anfrage durch eine Verlaufsnavigation (Zurück/Vor) ausgelöst wurde, sonst false.

Beispiele

Im Service Worker Verlaufsnavigationen zuerst aus dem Cache bedienen

// sw.js
self.addEventListener('fetch', (event) => {
  const { request } = event;
  if (request.mode !== 'navigate') return;

  if (request.isHistoryNavigation) {
    // Zurück/Vor: zuerst im Cache suchen, damit die Seite sofort da ist
    event.respondWith((async () => {
      const cached = await caches.match(request);
      return cached ?? fetch(request);
    })());
  } else {
    // Neue Navigation: zuerst das Netzwerk, bei Fehler der Cache
    event.respondWith((async () => {
      try {
        const response = await fetch(request);
        const cache = await caches.open('pages-v1');
        cache.put(request, response.clone());
        return response;
      } catch {
        return (await caches.match(request)) ?? Response.error();
      }
    })());
  }
});

Verlaufsnavigationen protokollieren

// sw.js
self.addEventListener('fetch', (event) => {
  if (event.request.mode === 'navigate') {
    console.log(event.request.url, 'Verlaufsnavigation:', event.request.isHistoryNavigation);
  }
});

https://example.com/artikel Verlaufsnavigation: true

Feature-Erkennung und Standardwert bei eigenen Requests

const supported = 'isHistoryNavigation' in Request.prototype;
console.log('Unterstützt:', supported);

const req = new Request('/api/daten');
console.log(req.isHistoryNavigation); // false oder undefined

Unterstützt: true false

// Wichtig · Fallstricke

Browser-Unterstützung: Nur Chromium-basierte Browser (Chrome, Edge, Opera) unterstützen die Eigenschaft. In Firefox und Safari ist der Wert undefined. Prüfen Sie daher mit 'isHistoryNavigation' in Request.prototype, ob sie verfügbar ist, und sehen Sie ein Standardverhalten für andere Browser vor.
undefined ist ein falsy-Wert. In nicht unterstützten Browsern landet eine Prüfung wie if (request.isHistoryNavigation) also einfach im Zweig für normale Navigationen. Das ist meist harmlos, sollte aber bewusst so gewollt sein.
Die Eigenschaft sagt nichts über den Back/Forward-Cache (bfcache) aus. Wird eine Seite aus dem bfcache wiederhergestellt, gibt es gar keinen Request, und der Service Worker sieht nichts davon. Dafür ist das Event pageshow mit event.persisted zuständig.
Die Eigenschaft ist nur für Navigationsanfragen (request.mode === 'navigate') aussagekräftig. Unterressourcen wie Bilder oder Skripte liefern in der Regel false.
Schreibgeschützt: Eine Zuweisung wird still ignoriert (im Strict Mode gibt es einen TypeError).

Siehe auch

Request Request.mode Request.destination FetchEvent History.back() PerformanceSoftNavigation.navigationType