Request.isReloadNavigation — Eigenschaft · JavaScript-Referenz

Signatur

Request.isReloadNavigation

Beschreibung

Die schreibgeschützte Eigenschaft isReloadNavigation eines Request-Objekts ist true, wenn die Anfrage eine Navigation ist, die der Benutzer durch Neuladen ausgelöst hat, z. B. über die Neu-laden-Schaltfläche, F5 oder location.reload(). In allen anderen Fällen ist sie false. Technisch gibt sie das reload-navigation flag aus der Fetch-Spezifikation wieder.

Wirklich nützlich ist die Eigenschaft vor allem in einem Service Worker im fetch-Event. Dort kannst du unterscheiden, ob der Benutzer eine Seite normal aufruft oder sie bewusst neu lädt. Ein typisches Muster: Bei normalen Aufrufen kommt die Seite schnell aus dem Cache. Lädt der Benutzer neu, ist das ein Zeichen, dass er aktuelle Daten will, und der Service Worker holt die Seite dann vorrangig aus dem Netzwerk.

Bei Anfragen, die du selbst mit fetch() oder new Request() erzeugst, ist der Wert praktisch immer false. Sinnvoll ist er nur bei Navigationsanfragen (request.mode === "navigate"), die der Browser erzeugt hat.

Beispiele

Service Worker: beim Neuladen Netzwerk zuerst, sonst Cache zuerst

// sw.js
const CACHE = 'seiten-v1';

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

  event.respondWith((async () => {
    const cache = await caches.open(CACHE);

    // Neuladen durch den Benutzer: frische Daten bevorzugen
    if (request.isReloadNavigation) {
      try {
        const antwort = await fetch(request);
        await cache.put(request, antwort.clone());
        return antwort;
      } catch {
        return (await cache.match(request)) ?? Response.error();
      }
    }

    // Normaler Aufruf: Cache zuerst
    const zwischengespeichert = await cache.match(request);
    return zwischengespeichert ?? fetch(request);
  })());
});

Selbst erzeugte Anfragen sind keine Neulade-Navigation

const req = new Request('/api/daten');
console.log(req.isReloadNavigation);
console.log(req.mode);

false cors

Feature-Erkennung und Protokollierung im Service Worker

const unterstuetzt = 'isReloadNavigation' in Request.prototype;

self.addEventListener('fetch', (event) => {
  const { request } = event;
  if (request.mode === 'navigate') {
    const art = !unterstuetzt
      ? 'unbekannt (nicht unterstützt)'
      : request.isReloadNavigation ? 'Neuladen' : 'normale Navigation';
    console.log(`${request.url}: ${art}`);
  }
});

https://example.com/: Neuladen

// Wichtig · Fallstricke

Browser-Unterstützung: Die Eigenschaft ist in der Fetch-Spezifikation definiert, wird aber nicht von allen Browsern unterstützt. Prüfe deshalb vorher mit 'isReloadNavigation' in Request.prototype, ob sie verfügbar ist. Ohne Unterstützung ist der Wert undefined, was als falsy gilt und damit wie false behandelt wird. Deine Logik sollte also auch ohne diese Eigenschaft sinnvoll funktionieren.
Kopieren mit init setzt den Wert zurück: new Request(event.request) übernimmt den Wert. Sobald du aber ein init-Objekt mit Einträgen übergibst, z. B. new Request(event.request, { headers }), wird der Wert laut Spezifikation auf false zurückgesetzt. Lies ihn deshalb vorher am ursprünglichen Request aus.
Die Eigenschaft ist schreibgeschützt. Eine Zuweisung wird still ignoriert, im Strict Mode wirft sie einen TypeError.
Vor- und Zurück-Navigation im Verlauf zählt nicht als Neuladen. Dafür gibt es Request.isHistoryNavigation.
Service Worker laufen nur in sicheren Kontexten (HTTPS oder localhost).

Siehe auch

Request Request.mode Request.cache Cache Request.isHistoryNavigation