Utiliser l'API Service Worker Static Routing pour contourner le service worker sur des chemins spécifiques

Rachel Andrew

L'API de routage statique de service workers est disponible à partir de Chrome 123. Cette API vous permet de déclarer comment certains chemins de ressources doivent être récupérés. Cela signifie que le navigateur n'a pas besoin d'exécuter un service worker uniquement pour récupérer les réponses d'un cache ou directement à partir du réseau. Cette API est en phase d'évaluation depuis Chrome 116. Cet article décrit le lancement de l'API dans Chrome 123.

Utiliser l'API

Pour utiliser l'appel d'API, appelez event.addRoutes sur l'événement install du service worker. Transmettez à cette méthode une liste de routes, avec les propriétés suivantes :

condition
Indique quand la règle s'applique. Accepte les propriétés suivantes :
  • urlPattern : instance URLPattern ou chaîne représentant un URLPattern valide, qui peut être transmise au constructeur URLPattern.
  • requestMethod : chaîne contenant une méthode de requête.
  • requestMode : chaîne contenant un mode de requête.
  • requestDestination : chaîne contenant une destination de requête.
  • runningStatus : chaîne, "running" ou "not-running". Cela indique l'état d'exécution du service worker.
source
Spécifie comment les ressources correspondant à condition sont chargées. L'une des chaînes suivantes :
  • "network"
  • "cache"
  • "fetch-event"
  • "race-network-and-fetch-handler"

Dans l'exemple suivant, les URL qui commencent par "/articles" sont redirigées vers le service worker s'il est en cours d'exécution. Lorsqu'il existe plusieurs conditions, par exemple urlPattern et runningStatus, toutes les conditions doivent être remplies pour que la route soit utilisée.

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

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

Dans l'exemple suivant, les posts envoyés à un formulaire sont envoyés directement au réseau et contournent le service worker.

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

Dans l'exemple suivant, le stockage du cache nommé "pictures" est utilisé pour récupérer les fichiers avec une extension .png ou .jpg.

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

Modifications par rapport à la phase d'évaluation

L'essai d'origine utilisait InstallEvent.registerRouter() au lieu de InstallEvent.addRoutes(). La méthode registerRouter() ne pouvait être appelée qu'une seule fois. Cette modification a été apportée en fonction des commentaires de la communauté sur le test d'origine.

La nouvelle API tire également parti des modifications apportées à URLPattern dans Chrome 121. Elle permet de spécifier une méthode, un mode et une destination de requête, et ajoute des options de source supplémentaires.

Prise en charge dans les outils pour les développeurs Chrome

Les règles de routeur enregistrées s'affichent dans l'onglet Service Worker du panneau Application.

Règles de routeur mises en évidence dans le panneau "Application".

Dans le panneau Réseau, si la requête correspond à la règle enregistrée, cela est indiqué dans la colonne "Taille". Lorsque vous pointez sur la colonne "Taille", l'ID du routeur enregistré s'affiche. Les règles correspondantes s'affichent dans l'onglet "Application".

ID du routeur tel qu'il s'affiche dans le panneau "Réseau".