new FetchEvent() — Methode · JavaScript-Referenz

Signatur

new FetchEvent(type, options)

Beschreibung

Mit new FetchEvent() erzeugen Sie von Hand ein FetchEvent. Normalerweise legt der Browser diese Events selbst an und sendet sie an den fetch-Handler des Service Workers, sobald eine kontrollierte Seite eine Netzwerkanfrage stellt. Den Konstruktor brauchen Sie deshalb nur in Sonderfällen.

Typische Einsatzgebiete sind Unit-Tests für die Fetch-Logik eines Service Workers, das Simulieren von Anfragen (etwa zum Vorwärmen eines Caches über die gleiche Handler-Logik) und das Aufrufen eigener Routing-Funktionen, die ein FetchEvent als Eingabe erwarten.

Der Konstruktor ist nur im globalen Bereich eines Service Workers (ServiceWorkerGlobalScope) verfügbar, nicht im Fenster oder in normalen Web Workern. Das Pflichtfeld request im Options-Objekt muss ein Request-Objekt sein. Selbst erzeugte Events haben isTrusted === false. Eine Antwort über respondWith() hat bei ihnen keinen Einfluss auf echte Netzwerkanfragen.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Name des Events, in der Praxis immer `"fetch"`.
$options Pflicht	FetchEventInit		Objekt mit den Event-Eigenschaften. Zusätzlich zu den `EventInit`-Feldern (`bubbles`, `cancelable`, `composed`) gibt es diese Felder: `request` (`Request`, Pflicht): die Anfrage, die das Event auslöst. `clientId` (`string`, Standard `""`): ID des Clients, von dem die Anfrage kommt. `resultingClientId` (`string`, Standard `""`): ID des Clients, der durch eine Navigation entsteht. `replacesClientId` (`string`, Standard `""`): ID des Clients, der durch die Navigation ersetzt wird. `preloadResponse` (`Promise<Response\|undefined>`): Antwort aus dem Navigation Preload. `handled` (`Promise<undefined>`): Promise, das anzeigt, ob das Event verarbeitet wurde. `isReload` (`boolean`, veraltet): ob die Anfrage durch ein Neuladen ausgelöst wurde.

Rückgabewert

Typ

FetchEvent

Beschreibung

Ein neues FetchEvent-Objekt mit den übergebenen Eigenschaften.

Beispiele

Einfaches FetchEvent erzeugen und auslesen

// Im Service Worker (sw.js)
const request = new Request('/api/produkte', { method: 'GET' });

const event = new FetchEvent('fetch', {
  request,
  clientId: 'test-client-1'
});

console.log(event.type);
console.log(event.request.url);
console.log(event.clientId);
console.log(event.isTrusted);

fetch https://example.com/api/produkte test-client-1 false

Routing-Logik testen, ohne das Netzwerk zu nutzen

// Handler-Logik als eigene Funktion, damit sie testbar ist
const handleFetch = (event) => {
  const url = new URL(event.request.url);
  if (url.pathname.startsWith('/api/')) return 'netzwerk-zuerst';
  if (/\.(css|js|png)$/.test(url.pathname)) return 'cache-zuerst';
  return 'standard';
};

self.addEventListener('fetch', (event) => {
  // Echter Einsatz: Strategie auswerten und respondWith() aufrufen
  console.log('Strategie:', handleFetch(event));
});

// Kleiner Selbsttest
const testFaelle = ['/api/user', '/styles/main.css', '/kontakt'];
for (const pfad of testFaelle) {
  const ev = new FetchEvent('fetch', { request: new Request(pfad) });
  console.log(pfad, '→', handleFetch(ev));
}

/api/user → netzwerk-zuerst /styles/main.css → cache-zuerst /kontakt → standard

Synthetisches Event an den eigenen Listener senden

self.addEventListener('fetch', (event) => {
  console.log('Listener erhalten:', event.request.url, 'vertrauenswürdig:', event.isTrusted);
});

self.addEventListener('activate', (event) => {
  // Handler einmal mit einer Testanfrage anstoßen
  const testEvent = new FetchEvent('fetch', {
    request: new Request('/offline.html'),
    cancelable: true
  });
  self.dispatchEvent(testEvent);
});

Listener erhalten: https://example.com/offline.html vertrauenswürdig: false

// Wichtig · Fallstricke

Nur im Service Worker: Außerhalb von ServiceWorkerGlobalScope ist FetchEvent nicht definiert. Aufrufe im Fenster erzeugen einen ReferenceError.
request ist Pflicht: Ohne request oder mit einem Wert, der kein Request ist, wirft der Konstruktor einen TypeError.
Keine echte Netzwerkwirkung: Selbst erzeugte Events sind nicht vertrauenswürdig (isTrusted === false). respondWith() ist nur während des synchronen Dispatches erlaubt, sonst kommt ein InvalidStateError. Eine echte Seitenanfrage beantwortet es nie.
isReload ist veraltet und wird nicht von allen Browsern unterstützt. preloadResponse und handled fehlen in älteren Browserversionen möglicherweise.
Service Worker laufen nur in sicheren Kontexten (HTTPS oder localhost).

Siehe auch

new ContentIndexEvent() new TouchEvent() new FocusEvent() new PushEvent() new SyncEvent()