InstallEvent: addRoutes() Methode

routerRules

Ein einzelnes Objekt oder ein Array von einem oder mehreren Objekten, die Regeln 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, welche spezifizieren, welche Ressourcen mit dieser Regel übereinstimmen sollen. Es können die folgenden Eigenschaften enthalten sein; wenn mehrere Eigenschaften verwendet werden, muss eine Ressource alle angegebenen Bedingungen erfüllen, um mit der Regel übereinzustimmen.

not Optional

Ein condition-Objekt, das Bedingungen definiert, die ausdrücklich nicht erfüllt sein müssen, um mit der Regel übereinzustimmen. Bedingungen, die innerhalb einer not-Bedingung definiert sind, schließen sich gegenseitig mit anderen Bedingungen aus.

or Optional

Ein Array von condition-Objekten. Eine Menge dieser definierten Bedingungen muss erfüllt sein, um mit der Regel übereinzustimmen. Bedingungen, die innerhalb einer or-Bedingung definiert sind, schließen sich gegenseitig mit anderen Bedingungen aus.

requestMethod Optional

Ein Zeichenfolgenwert, der die HTTP-Methode beschreibt, mit der eine Anfrage gesendet werden soll, damit sie mit der Regel übereinstimmt, wie zum Beispiel "get", "put" oder "head".

requestMode Optional

Ein Zeichenfolgenwert, der den Modus einer Anfrage beschreibt, damit sie mit der Regel übereinstimmt, zum Beispiel "same-origin", "no-cors" oder "cors".

requestDestination Optional

Ein Zeichenfolgenwert, der das Ziel einer Anfrage beschreibt, also welcher Inhaltstyp angefordert werden soll, damit sie mit der Regel übereinstimmt. Beispiele umfassen "audio", "document", "script" und "worker".

runningStatus Optional

Ein enumerierter Wert, der den geforderten Betriebsstatus des Service Workers repräsentiert, damit eine Anfrage mit der Regel übereinstimmt. Mögliche Werte sind "running" oder "not-running".

urlPattern Optional

Eine URLPattern-Instanz oder ein URLPattern()-Konstruktor input Muster, das die URLs repräsentiert, die mit der Regel übereinstimmen.

source

Ein enumerierter Wert oder ein Objekt, das die Quelle spezifiziert, 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 von 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 sowohl aus dem Netzwerk als auch über den fetch-Ereignishandler des Service Workers gleichzeitig zu laden. Das zuerst abgeschlossene wird verwendet.

Der source Wert kann auch auf ein Objekt gesetzt werden, das eine einzelne Eigenschaft, cacheName, enthält, deren Wert eine Zeichenfolge ist, die den Namen eines Browser-Cache repräsentiert. Passende Ressourcen werden aus diesem spezifischen benannten Cache geladen, falls er existiert.

Ein Promise, das mit undefined erfüllt wird.

TypeError DOMException

Wird ausgelöst, wenn eines oder mehrere der Regeln-Objekte innerhalb von 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, zum 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 mit dem Namen "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 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)