Gebruik de Service Worker Static Routing API om de service worker voor specifieke paden te omzeilen

Rachel Andrew

Vanaf Chrome 123 is de Service Worker Static Routing API beschikbaar. Met deze API kunt u declaratief aangeven hoe bepaalde resourcepaden moeten worden opgehaald. Dit betekent dat de browser geen service worker hoeft uit te voeren om reacties uit een cache of rechtstreeks van het netwerk op te halen. Deze API is sinds Chrome 116 in een origin trial-fase en dit bericht beschrijft de lancering van de API in Chrome 123.

Opmerking: Zie het oorspronkelijke bericht, Service Worker Static Routing API Origin Trial, voor achtergrondinformatie over deze functie.

Gebruik de API

Om de API-aanroep event.addRoutes te gebruiken in de service worker install gebeurtenis, dient u een lijst met routes met de volgende eigenschappen aan deze methode door te geven:

condition

Specificeert wanneer de regel van toepassing is. Accepteert de volgende eigenschappen:

• urlPattern : Een URLPattern- instantie, of een tekenreeks die een geldige URLPattern vertegenwoordigt, die kan worden doorgegeven aan de URLPattern constructor.
• requestMethod : Een tekenreeks die een verzoekmethode bevat.
• requestMode : Een tekenreeks die de aanvraagmodus bevat.
• requestDestination : Een tekenreeks met de bestemming van het verzoek.
• runningStatus : een tekenreeks, ofwel "running" of "not-running" . Dit geeft de status van de service worker aan.

source

Specificeert hoe de resources die aan condition voldoen, worden geladen. Een van de volgende tekenreeksen:

• "network"
• "cache"
• "fetch-event"
• "race-network-and-fetch-handler"

Opmerking: source kan optioneel een cachenaam bevatten, zie het voorbeeld verderop in dit bericht.

In het volgende voorbeeld worden URL's die beginnen met "/articles" doorgestuurd naar de service worker als deze actief is. Wanneer er meerdere voorwaarden zijn, bijvoorbeeld urlPattern en runningStatus , moeten aan alle voorwaarden worden voldaan om de route te kunnen gebruiken.

addEventListener('install', (event) => {
  event.addRoutes({
    condition: {

          urlPattern: "/articles/*",
          runningStatus: "running"
    },
    source: "fetch-event"
  });
});

In het volgende voorbeeld worden berichten naar een formulier rechtstreeks naar het netwerk verzonden en wordt de service worker overgeslagen.

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

In het volgende voorbeeld wordt de cacheopslag met de naam "pictures" gebruikt om bestanden met de bestandsextensie .png of .jpg op te halen.

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

Wijzigingen ten opzichte van het oorspronkelijke onderzoek

De oorspronkelijke Origin-proefversie gebruikte InstallEvent.registerRouter() in plaats van InstallEvent.addRoutes() , waarbij de registerRouter() methode slechts eenmaal kon worden aangeroepen. Deze wijziging is gebaseerd op feedback van de community op de Origin-proefversie .

Opmerking: Als uw code de verouderde methode registerRouter() gebruikt, raden we u aan over te stappen op addRoutes() . We zijn van plan registerRouter() in Chrome versie 125 te verwijderen.

De nieuwe API maakt ook gebruik van de wijzigingen in URLPattern die in Chrome 121 zijn geïntroduceerd, voegt de mogelijkheid toe om een ​​verzoekmethode, modus en bestemming te specificeren, en voegt extra bronopties toe.

Ondersteuning in Chrome DevTools

Geregistreerde routerregels worden weergegeven in het tabblad Service Worker van het toepassingspaneel .

In het netwerkpaneel wordt in de kolom 'Grootte' aangegeven of het verzoek overeenkomt met de geregistreerde regel. Wanneer u de muiswijzer boven deze kolom houdt, wordt de geregistreerde router-ID weergegeven. De bijbehorende regels worden weergegeven in het tabblad 'Applicatie'.