ServiceWorkerGlobalScope: fetch-Event

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandler-Eigenschaft.

addEventListener("fetch", (event) => { })

onfetch = (event) => { }

Das fetch-Ereignis wird im globalen Gültigkeitsbereich des Service Workers ausgelöst, wenn der Haupt-App-Thread eine Netzwerk-Anfrage stellt. Dies umfasst nicht nur explizite fetch()-Aufrufe vom Haupt-Thread, sondern auch implizite Netzwerk-Anfragen, um Seiten und untergeordnete Ressourcen (wie JavaScript, CSS und Bilder) zu laden, die vom Browser nach einer Seiten-Navigation durchgeführt werden.

Der Ereignishandler erhält ein FetchEvent-Objekt, welches Zugriff auf die Anfrage als Request-Instanz bietet.

Das FetchEvent stellt zudem eine respondWith()-Methode bereit, die eine Response (oder ein Promise, das zu einer Response aufgelöst wird) als Parameter annimmt. Dies ermöglicht dem Service Worker-Ereignishandler, die Antwort bereitzustellen, die auf die Anfrage im Haupt-Thread zurückgegeben wird.

Zum Beispiel kann der Service Worker zurückgeben:

• Eine lokal zwischengespeicherte Antwort, die über die Cache-Schnittstelle abgerufen wird.
• Eine Antwort, die der Service Worker synthetisiert, unter Verwendung von Methoden wie Response.json() oder dem Response()-Konstruktor.
• Einen Netzwerkfehler, unter Verwendung der Response.error()-Methode. Dies führt dazu, dass der fetch()-Aufruf abgelehnt wird.

Die respondWith()-Methode kann nur einmal für eine gegebene Anfrage aufgerufen werden. Wenn mehrere fetch-Ereignis-Listener hinzugefügt werden, werden sie in der Reihenfolge aufgerufen, in der sie registriert wurden, bis einer von ihnen respondWith() aufruft.

Die respondWith()-Methode muss synchron aufgerufen werden: Das heißt, man kann sie nicht in einem then-Handler aufrufen.

Typischerweise wird ein fetch-Ereignishandler unterschiedliche Strategien je nach Eigenschaften der Anfrage wie deren URL ausführen:

function strategy1() {
  return fetch("picnic.jpg");
}

function strategy2() {
  return Response.error();
}

const pattern1 = /^\/salamander/;
const pattern2 = /^\/lizard/;

self.addEventListener("fetch", (event) => {
  const url = new URL(event.request.url);
  if (pattern1.test(url.pathname)) {
    event.respondWith(strategy1());
  } else if (pattern2.test(url.pathname)) {
    event.respondWith(strategy2());
  }
});

Wenn respondWith() im Handler nicht aufgerufen wird, führt der Benutzeragent automatisch die ursprüngliche Netzwerk-Anfrage durch. Zum Beispiel werden im obigen Code alle Anfragen, die nicht pattern1 oder pattern2 entsprechen, ausgeführt, als ob der Service Worker nicht existierte.

Ein FetchEvent.

Dieser fetch-Ereignishandler versucht zunächst, die Antwort im Cache zu finden. Wenn eine Antwort gefunden wird, gibt er die zwischengespeicherte Antwort zurück. Andernfalls versucht er, die Ressource aus dem Netzwerk zu holen.

async function cacheThenNetwork(request) {
  const cachedResponse = await caches.match(request);
  if (cachedResponse) {
    console.log("Found response in cache:", cachedResponse);
    return cachedResponse;
  }
  console.log("Falling back to network");
  return fetch(request);
}

self.addEventListener("fetch", (event) => {
  console.log(`Handling fetch event for ${event.request.url}`);
  event.respondWith(cacheThenNetwork(event.request));
});

Dieser fetch-Ereignishandler implementiert eine "nur Cache"-Strategie für Skripte und Stylesheets. Wenn die destination-Eigenschaft der Anfrage "script" oder "style" ist, durchsucht der Handler nur den Cache und gibt bei Nichterfolg einen Fehler zurück. Alle anderen Anfragen gehen durch das Netzwerk.

async function cacheOnly(request) {
  const cachedResponse = await caches.match(request);
  if (cachedResponse) {
    console.log("Found response in cache:", cachedResponse);
    return cachedResponse;
  }
  return Response.error();
}

self.addEventListener("fetch", (event) => {
  if (
    event.request.destination === "script" ||
    event.request.destination === "style"
  ) {
    event.respondWith(cacheOnly(event.request));
  }
});

• Verwendung von Service Workern
• Grundlegendes Codebeispiel für Service Worker
• fetch()-Methode
• Request-Schnittstelle
• Response-Schnittstelle