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 dieser Regel entsprechen 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 müssen, um der Regel zu entsprechen. Bedingungen, die in 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, um der Regel zu entsprechen. Bedingungen, die in einer or-Bedingung definiert sind, sind mit anderen Bedingungen gegenseitig ausschließend.

requestMethod Optional

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

requestMode Optional

Ein String, der den Modus repräsentiert, 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, um der Regel zu entsprechen. Beispiele sind "audio", "document", "script" und "worker".

runningStatus Optional

Ein enumerierter Wert, der den erforderlichen Ausführungsstatus 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 enumerierter Wert oder ein Objekt, das die Quelle angibt, aus der passende Ressourcen geladen werden. Mögliche enumerierte 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 er 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"

Es wird versucht, Ressourcen gleichzeitig aus dem Netzwerk und dem fetch-Ereignishandler des Service-Workers zu laden. Welche zuerst fertig ist, 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 repräsentiert. Passende Ressourcen werden aus diesem speziellen benannten Cache geladen, falls dieser existiert.

Ein Promise, das mit undefined erfüllt wird.

TypeError DOMException

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

Im folgenden Beispiel werden URLs, die mit /articles beginnen, an das Netzwerk weitergeleitet, 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 zum Beispiel Dateien mit den Erweiterungen .png oder .jpg nur dann abgleichen möchten, wenn 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-Ereignis
• Service Worker API
• Verwendung der Service Worker Static Routing API, um den Service Worker für bestimmte Pfade zu umgehen auf developer.chrome.com (2024)