InstallEvent: Methode addRoutes()

routerRules

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

condition

Ein Objekt, das eine oder mehrere Bedingungen definiert, die angeben, welche Ressourcen dieser Regel entsprechen sollen. Folgende 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 innerhalb einer not-Bedingung definiert sind, sind mit anderen Bedingungen gegenseitig ausschließend.

or Optional

Ein Array von condition-Objekten. Ein Satz dieser definierten Bedingungen muss erfüllt sein, damit die Regel zutrifft. Bedingungen, die innerhalb einer or-Bedingung definiert sind, sind mit anderen Bedingungen gegenseitig ausschließend.

requestMethod Optional

Ein String, der die HTTP-Methode darstellt, mit der eine Anfrage gesendet werden sollte, damit sie der Regel entspricht, wie "get", "put" oder "head".

requestMode Optional

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

requestDestination Optional

Ein String, der das Ziel einer Anfrage darstellt, d.h. welchen Inhaltstyp angefordert werden soll, damit die Regel zutrifft. Beispiele sind "audio", "document", "script" und "worker".

runningStatus Optional

Ein aufzuzählender Wert, der den erforderlichen Betriebsstatus des Service Workers darstellt, damit eine Anfrage der Regel entspricht. 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 aufzuzählender Wert oder ein Objekt, das die Quelle spezifiziert, aus der übereinstimmende Ressourcen geladen werden. Mögliche aufzuzählende Werte sind:

"cache"

Ressourcen werden aus einem Browser-Cache geladen.

"fetch-event"

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

"network"

Ressourcen werden aus dem Netzwerk geladen.

"race-network-and-fetch-handler"

Versucht, Ressourcen sowohl aus dem Netzwerk als auch über den fetch-Ereignishandler des Service Workers gleichzeitig zu laden. Welche zuerst abgeschlossen ist, wird verwendet.

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

Ein Promise, das mit undefined erfüllt wird.

TypeError DOMException

Wird ausgelöst, wenn eines oder mehrere der Regelobjekte innerhalb von routerRules ungültig sind oder ein source-Wert von "fetch-event" angegeben ist, wenn der zugeordnete Service Worker keinen fetch-Ereignishandler hat. Wird auch ausgelöst, wenn versucht wird, or mit einem anderen Bedingungstyp zu kombinieren.

Im folgenden Beispiel werden URLs, die mit /articles beginnen, zum Netzwerk umgeleitet, 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 zum 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" zum Abrufen von Dateien mit den Erweiterungen .png oder .jpg verwendet:

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

Es ist nicht möglich, or mit einer anderen Bedingung zu kombinieren – dies führt zu einem TypeError. Wenn Sie zum Beispiel Dateien mit den Erweiterungen .png oder .jpg abgleichen möchten, aber nur wenn die requestMethod get ist, müssten 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-Ereignis
• Service Worker API
• Verwenden Sie die Service Worker Static Routing API, um den Service Worker für bestimmte Pfade zu umgehen auf developer.chrome.com (2024)