Ab Chrome 123 ist die Service Worker Static Routing API verfügbar. Mit dieser API können Sie deklarativ angeben, wie bestimmte Ressourcenpfade abgerufen werden sollen. Das bedeutet, dass der Browser keinen Service Worker ausführen muss, um Antworten aus einem Cache oder direkt aus dem Netzwerk abzurufen. Diese API befindet sich seit Chrome 116 in einem Ursprungstest. In diesem Beitrag wird die Einführung der API in Chrome 123 beschrieben.
API verwenden
Verwenden Sie den API-Aufruf event.addRoutes für das Service Worker-Ereignis install. Übergeben Sie dieser Methode eine Liste von Routen mit den folgenden Attributen:
condition- Gibt an, wann die Regel angewendet wird. Akzeptiert die folgenden Attribute:
urlPattern: Eine URLPattern-Instanz oder ein String, der ein gültiges URLPattern darstellt und an denURLPattern-Konstruktor übergeben werden kann.requestMethod: Ein String mit einer Anfragemethode.requestMode: Ein String mit einem Anfragemodus.requestDestination: Ein String mit einem Ziel für die Anfrage.runningStatus: ein String, entweder"running"oder"not-running". Dies gibt den Ausführungsstatus des Service Workers an.
source- Gibt an, wie die Ressourcen geladen werden, die mit
conditionübereinstimmen. Einer der folgenden Strings:"network""cache""fetch-event""race-network-and-fetch-handler"
Im folgenden Beispiel werden URLs, die mit „/articles“ beginnen, an den Service Worker weitergeleitet, wenn er gerade ausgeführt wird. Wenn mehrere Bedingungen vorhanden sind, z. B. urlPattern und runningStatus, müssen alle Bedingungen erfüllt sein, damit die Route verwendet werden kann.
addEventListener('install', (event) => {
event.addRoutes({
condition: {
urlPattern: "/articles/*",
runningStatus: "running"
},
source: "fetch-event"
});
});
Im folgenden Beispiel werden POST-Anfragen an ein Formular direkt an das Netzwerk gesendet und der Service Worker wird umgangen.
addEventListener('install', (event) => {
event.addRoutes({
condition: {
urlPattern: "/form/*",
requestMethod: "post"
},
source: "network"
});
});
Im folgenden Beispiel wird der Cache-Speicher mit dem Namen "pictures" verwendet, um Dateien mit der Dateiendung .png oder .jpg abzurufen.
addEventListener('install', (event) => {
event.addRoutes({
condition: {
or: [
{urlPattern: "*.png"},
{urlPattern: "*.jpg"}
]
},
source: {
cacheName: "pictures"
}
});
});
Änderungen gegenüber dem Ursprungstest
Im ursprünglichen Origin Trial wurde InstallEvent.registerRouter() anstelle von InstallEvent.addRoutes() verwendet. Die Methode registerRouter() konnte nur einmal aufgerufen werden. Diese Änderung basiert auf Community-Feedback zum Origin Trial.
Die neue API nutzt auch Änderungen an URLPattern, die in Chrome 121 eingeführt wurden. Außerdem können Sie jetzt eine Anfragemethode, einen Modus und ein Ziel angeben und zusätzliche Quelloptionen hinzufügen.
Unterstützung in den Chrome-Entwicklertools
Registrierte Routerregeln werden im Tab Service Worker des Bereichs Anwendung angezeigt.
Wenn die Anfrage mit der registrierten Regel übereinstimmt, wird dies im Network-Bereich in der Spalte „Größe“ angegeben. Wenn Sie den Mauszeiger auf die Spalte „Größe“ bewegen, wird die registrierte Router-ID angezeigt. Die entsprechenden Regeln werden auf dem Anwendungs-Tab angezeigt.
