ServiceWorkerGlobalScope: fetch-Ereignis

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 Bereich des Service Workers ausgelöst, wenn der Hauptanwendungsthread eine Netzwerk-Anfrage durchführt. Dies umfasst nicht nur explizite fetch()-Aufrufe aus dem Hauptthread, sondern auch implizite Netzwerk-Anfragen zum Laden von Seiten und Unterressourcen (wie JavaScript, CSS und Bilder), die der Browser beim Seitenwechsel ausführt.

Der Ereignishandler erhält ein FetchEvent-Objekt übergeben, das Zugriff auf die Anfrage als eine Request-Instanz bietet.

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

Zum Beispiel kann der Service Worker Folgendes zurückgeben:

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

Die respondWith()-Methode kann nur einmal für eine gegebene Anfrage aufgerufen werden. Wenn mehrere fetch-Ereignishandler 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, Sie können sie nicht in einem then-Handler aufrufen.

Typischerweise wird ein fetch-Ereignishandler unterschiedliche Strategien ausführen, abhängig von Merkmalen der Anfrage, wie ihrer URL:

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() nicht im Handler aufgerufen wird, führt der Benutzeragent automatisch die ursprüngliche Netzwerk-Anfrage aus. Zum Beispiel werden in dem obigen Code alle Anfragen, die nicht pattern1 oder pattern2 entsprechen, so ausgeführt, als ob der Service Worker nicht existieren würde.

Ein FetchEvent.

Dieser fetch-Ereignishandler versucht zuerst, 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 laden.

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"-Richtlinie für Skripte und Stylesheets. Wenn die destination-Eigenschaft der Anfrage "script" oder "style" lautet, schaut der Handler nur im Cache nach und gibt einen Fehler zurück, wenn die Antwort nicht gefunden wird. Alle anderen Anfragen werden über das Netzwerk weitergeleitet.

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
• Einfaches Service-Worker-Codebeispiel
• fetch()-Methode
• Request-Schnittstelle
• Response-Schnittstelle