InstallEvent: Methode addRoutes()

Syntax

addRoutes(routerRules)

Parameter

routerRules

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

condition

Ein Objekt, das eine oder mehrere Bedingungen definiert, anhand derer bestimmt wird, welche Ressourcen dieser Regel entsprechen. Die folgenden Eigenschaften können enthalten sein. Werden mehrere Eigenschaften verwendet, 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, damit die Regel zutrifft. Bedingungen innerhalb einer not-Bedingung schließen sich mit anderen Bedingungen gegenseitig aus.

or Optional

Ein Array aus condition-Objekten. Einer dieser Bedingungssätze muss erfüllt sein, damit die Regel zutrifft. Bedingungen innerhalb einer or-Bedingung schließen sich mit anderen Bedingungen gegenseitig aus.

requestMethod Optional

Ein String, der die HTTP-Methode angibt, mit der eine Anfrage gesendet werden muss, damit die Regel zutrifft, beispielsweise "get", "put" oder "head".

requestMode Optional

Ein String, der den Modus angibt, den eine Anfrage haben muss, damit die Regel zutrifft, beispielsweise "same-origin", "no-cors" oder "cors".

requestDestination Optional

Ein String, der das Ziel einer Anfrage angibt, also welcher Inhaltstyp angefordert werden muss, damit die Regel zutrifft. Beispiele sind "audio", "document", "script" und "worker".

runningStatus Optional

Ein Aufzählungswert, der angibt, welchen Ausführungsstatus der Service Worker haben muss, damit eine Anfrage der Regel entspricht. Mögliche Werte sind "running" und "not-running".

urlPattern Optional

Eine URLPattern-Instanz oder ein input-Muster für den URLPattern()-Konstruktor, das die URLs beschreibt, die der Regel entsprechen. Einfanggruppen in regulären Ausdrücken sind nicht zulässig; daher muss URLPattern.hasRegExpGroups den Wert false haben.

source

Ein Aufzählungswert oder ein Objekt, das die Quelle angibt, aus der passende Ressourcen geladen werden. Mögliche Aufzählungswerte sind:

"cache"

Ressourcen werden aus einem Browser-Cache geladen.

"fetch-event"

Ressourcen werden über den fetch-Event-Handler des Service Workers geladen. Dies lässt sich mit der Bedingung "runningStatus" kombinieren, um Ressourcen aus dem Service Worker zu laden, wenn er ausgeführt wird, und andernfalls auf eine statische Route über das Netzwerk zurückzugreifen.

"network"

Ressourcen werden aus dem Netzwerk geladen.

"race-network-and-fetch-handler"

Es wird gleichzeitig versucht, Ressourcen aus dem Netzwerk und über den fetch-Event-Handler des Service Workers zu laden. Verwendet wird die Quelle, die zuerst fertig ist.

Der Wert von source kann auch ein Objekt mit einer einzigen Eigenschaft sein: cacheName. Deren Wert ist ein String mit dem Namen eines Browser-Cache. Passende Ressourcen werden aus diesem benannten Cache geladen, sofern er existiert.

Rückgabewert

Ein Promise, das mit undefined erfüllt wird.

Ausnahmen

TypeError

Wird ausgelöst, wenn eines oder mehrere der Regelobjekte in routerRules ungültig sind oder den source-Wert "fetch-event" haben, obwohl der zugehörige Service Worker keinen fetch-Event-Handler besitzt. Wird auch ausgelöst, wenn Sie versuchen, or mit einem anderen Bedingungstyp zu kombinieren.

Beispiele

Bestimmte Anfragen an das Netzwerk weiterleiten, wenn der Service Worker nicht ausgeführt wird

Im folgenden Beispiel werden Anfragen an URLs, die mit /articles beginnen, an das Netzwerk weitergeleitet, wenn der Service Worker gerade nicht ausgeführt wird:

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

POST-Anfragen eines Formulars an das Netzwerk weiterleiten

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

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

Anfragen für bestimmte Bildtypen an einen benannten Cache weiterleiten

Im folgenden Beispiel wird der Browser-Cache mit dem Namen "pictures" verwendet, um Dateien mit den Endungen .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 Endungen .png oder .jpg nur dann abgleichen möchten, wenn requestMethod den Wert get hat, 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",
      },
    },
  );
});

Spezifikationen

Browser-Kompatibilität

Siehe auch

• InstallEvent
• install-Event
• Service Worker API
• Die Service Worker Static Routing API verwenden, um den Service Worker für bestimmte Pfade zu umgehen auf developer.chrome.com (2024)