FetchEvent.request — Eigenschaft · JavaScript-Referenz

Signatur

FetchEvent.request

Beschreibung

Die schreibgeschützte Eigenschaft request des FetchEvent-Interfaces enthält das Request-Objekt, das die Seite (oder ein Worker) abgesetzt hat und das vom Service Worker abgefangen wurde. Darüber erhält man Zugriff auf URL, Methode, Header, Modus (mode), Ziel (destination) und ggf. den Body der Anfrage.

Typischerweise wird event.request im fetch-Handler ausgewertet, um eine Caching-Strategie zu wählen: statische Assets aus dem Cache ausliefern, API-Aufrufe über das Netzwerk leiten, Navigationen (request.mode === 'navigate') mit einer Offline-Seite absichern usw. Das Objekt kann direkt an fetch(), cache.match() oder cache.put() übergeben werden.

Da die Eigenschaft schreibgeschützt ist, lässt sich die Anfrage nicht direkt verändern. Wer Header oder URL anpassen möchte, erzeugt mit new Request(event.request, { ... }) eine neue Anfrage und reicht diese weiter.

Rückgabewert

Typ

Request

Beschreibung

Das Request-Objekt, das den fetch-Event ausgelöst hat.

Beispiele

Cache-First-Strategie für GET-Anfragen

// sw.js
self.addEventListener('fetch', (event) => {
  const { request } = event;
  if (request.method !== 'GET') return; // nur GET cachen

  event.respondWith((async () => {
    const cached = await caches.match(request);
    if (cached) return cached;

    const response = await fetch(request);
    const cache = await caches.open('static-v1');
    cache.put(request, response.clone());
    return response;
  })());
});

Navigationen mit Offline-Fallback absichern

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

  event.respondWith((async () => {
    try {
      return await fetch(event.request);
    } catch {
      const cache = await caches.open('static-v1');
      return cache.match('/offline.html');
    }
  })());
});

Anfrage mit zusätzlichem Header weiterleiten

self.addEventListener('fetch', (event) => {
  const url = new URL(event.request.url);
  if (url.origin !== self.location.origin || !url.pathname.startsWith('/api/')) return;

  // event.request ist schreibgeschützt – neue Anfrage erzeugen
  const headers = new Headers(event.request.headers);
  headers.set('X-Client', 'service-worker');
  const modified = new Request(event.request, { headers });

  console.log(event.request.method, url.pathname);
  event.respondWith(fetch(modified));
});

GET /api/users

// Wichtig · Fallstricke

Body nur einmal lesbar: Wird event.request.json() o. Ä. aufgerufen, ist der Body verbraucht. Vor dem Lesen event.request.clone() verwenden, wenn die Anfrage anschließend noch an fetch() gehen soll.
Cache API: cache.put() akzeptiert nur GET-Anfragen; bei POST wird ein TypeError geworfen.
Navigationsanfragen: Bei mode: 'navigate' lässt sich new Request(event.request, …) nicht ohne Weiteres mit diesem Modus erzeugen – in dem Fall besser mit der URL arbeiten.
Fremde Origins: Anfragen mit mode: 'no-cors' liefern opake Antworten (status 0), die nicht auswertbar sind und Speicherplatz im Cache verbrauchen.
Nur im Service-Worker-Kontext verfügbar und erfordert HTTPS (bzw. localhost). Unterstützt in allen aktuellen Browsern.

Siehe auch

Request Cache.match() FetchEvent.handled FetchEvent.clientId FetchEvent.isReload