InstallEvent: addRoutes() Methode

routerRules

Ein einzelnes Objekt oder ein Array von einem oder mehreren Objekten, die Regeln dafür repräsentieren, wie bestimmte Ressourcen abgerufen werden sollen. Jedes routerRules-Objekt enthält die folgenden Eigenschaften:

condition

Ein Objekt, das eine oder mehrere Bedingungen definiert, die spezifizieren, welche Ressourcen mit dieser Regel übereinstimmen sollen. Die folgenden Eigenschaften können enthalten sein; wenn mehrere Eigenschaften verwendet werden, muss eine Ressource alle angegebenen Bedingungen erfüllen, um der Regel zu entsprechen.

not Optional

Ein condition-Objekt, das Bedingungen definiert, die ausdrücklich nicht erfüllt sein dürfen, um der Regel zu entsprechen. Bedingungen, die in einer not-Bedingung definiert sind, sind gegenseitig ausschließend mit anderen Bedingungen.

or Optional

Ein Array von condition-Objekten. Ein Satz dieser definierten Bedingungen muss erfüllt sein, um der Regel zu entsprechen. Bedingungen, die in einer or-Bedingung definiert sind, sind gegenseitig ausschließend mit anderen Bedingungen.

requestMethod Optional

Ein String, der die HTTP-Methode repräsentiert, mit der eine Anfrage gesendet werden soll, um der Regel zu entsprechen, wie z.B. "get", "put" oder "head".

requestMode Optional

Ein String, der den Modus darstellt, den eine Anfrage haben soll, um der Regel zu entsprechen, zum Beispiel "same-origin", "no-cors" oder "cors".

requestDestination Optional

Ein String, der das Ziel einer Anfrage repräsentiert, d.h. welcher Inhaltstyp angefordert werden soll, damit er der Regel entspricht. Beispiele sind "audio", "document", "script" und "worker".

runningStatus Optional

Ein enumerierter Wert, der den erforderlichen Betriebsstatus des Service Workers für eine Anfrage darstellt, um der Regel zu entsprechen. Werte können "running" oder "not-running" sein.

urlPattern Optional

Eine URLPattern-Instanz oder ein URLPattern()-Konstruktor-input-Muster, das die URLs darstellt, die der Regel entsprechen.

source

Ein enumerierter Wert oder ein Objekt, das die Quelle angibt, aus der übereinstimmende Ressourcen geladen werden. Mögliche enumerierte Werte sind:

"cache"

Ressourcen werden aus einem Browser-Cache geladen.

"fetch-event"

Ressourcen werden über den fetch-Event-Handler des Service Workers geladen. Dies kann mit der "runningStatus"-Bedingung kombiniert werden, um Ressourcen von einem Service Worker zu laden, wenn er läuft, und auf eine statische Route im Netzwerk zurückzugreifen, wenn nicht.

"network"

Ressourcen werden von dem Netzwerk geladen.

"race-network-and-fetch-handler"

Es wird versucht, Ressourcen sowohl vom Netzwerk als auch vom fetch-Event-Handler des Service Workers gleichzeitig zu laden. Die zuerst abgeschlossene Quelle wird verwendet.

Der source-Wert kann auch auf ein Objekt gesetzt werden, das eine einzelne Eigenschaft, cacheName, enthält, deren Wert ein String ist, der den Namen eines Browser-Cache darstellt. Übereinstimmende Ressourcen werden aus diesem spezifisch benannten Cache geladen, wenn er existiert.

Ein Promise, das mit undefined erfüllt wird.

TypeError DOMException

Wird ausgelöst, wenn eines oder mehrere der Regelnobjekte innerhalb von routerRules ungültig sind oder einen source-Wert von "fetch-event" haben, wenn der zugehörige Service Worker keinen fetch-Event-Handler hat. Ebenfalls ausgelöst, wenn Sie versuchen, or mit einem anderen Bedingungstyp zu kombinieren.

Im folgenden Beispiel werden URLs, die mit /articles beginnen, an das Netzwerk geleitet, wenn der Service Worker derzeit nicht läuft:

addEventListener("install", (event) => {
  event.addRoutes({
    condition: {
      urlPattern: "/articles/*",
      runningStatus: "not-running",
    },
    source: "network",
  });
});

Im folgenden Beispiel werden POST-Anfragen an ein Formular direkt an das Netzwerk gesendet und umgehen den Service Worker:

addEventListener("install", (event) => {
  event.addRoutes({
    condition: {
      urlPattern: "/form/*",
      requestMethod: "post",
    },
    source: "network",
  });
});

Im folgenden Beispiel wird der Browser-Cache namens "pictures" verwendet, um Dateien mit den Erweiterungen .png oder .jpg abzurufen:

addEventListener("install", (event) => {
  event.addRoutes({
    condition: {
      or: [{ urlPattern: "*.png" }, { urlPattern: "*.jpg" }],
    },
    source: {
      cacheName: "pictures",
    },
  });
});

Sie können or nicht mit einer anderen Bedingung kombinieren — dies führt zu einem TypeError. Wenn Sie beispielsweise Dateien mit den Erweiterungen .png oder .jpg nur dann abgleichen möchten, wenn die requestMethod get ist, müssen Sie zwei separate Bedingungen angeben:

addEventListener("install", (event) => {
  event.addRoutes(
    {
      condition: {
        urlPattern: "*.png",
        requestMethod: "get",
      },
      source: {
        cacheName: "pictures",
      },
    },
    {
      condition: {
        urlPattern: "*.jpg",
        requestMethod: "get",
      },
      source: {
        cacheName: "pictures",
      },
    },
  );
});

• InstallEvent
• install event
• Service Worker API
• Use the Service Worker Static Routing API to bypass the service worker for specific paths auf developer.chrome.com (2024)