Usar a API Service Worker Static Routing para ignorar o service worker em caminhos específicos

Rachel Andrew

A API de roteamento estático do Service Worker está disponível no Chrome 123. Essa API permite declarar como determinados caminhos de recursos devem ser buscados, o que significa que o navegador não precisa executar um worker de serviço apenas para buscar respostas de um cache ou diretamente da rede. Essa API está em teste de origem desde o Chrome 116. Esta postagem detalha o lançamento da API no Chrome 123.

Usar a API

Para usar a chamada de API event.addRoutes no evento install do service worker. Transmita a esse método uma lista de rotas com as seguintes propriedades:

condition

Especifica quando a regra é aplicada. Aceita as seguintes propriedades:

• urlPattern: uma instância de URLPattern ou uma string que representa um URLPattern válido, que pode ser transmitida para o construtor URLPattern.
• requestMethod: uma string que contém um método de solicitação.
• requestMode: uma string que contém um modo de solicitação.
• requestDestination: uma string que contém um destino de solicitação.
• runningStatus: uma string, "running" ou "not-running". Isso indica o status de execução do service worker.

source

Especifica como os recursos correspondentes a condition são carregados. Uma das seguintes strings:

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

No exemplo a seguir, os URLs que começam com "/articles" são roteados para o service worker, se ele estiver em execução. Quando há várias condições, por exemplo, urlPattern e runningStatus, todas precisam ser atendidas para que a rota seja usada.

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

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

No exemplo a seguir, as postagens em um formulário são enviadas diretamente para a rede e ignoram o worker de serviço.

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

No exemplo a seguir, o armazenamento em cache chamado "pictures" é usado para buscar arquivos com uma extensão de arquivo .png ou .jpg.

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

Mudanças do teste de origem

O teste de origem original usava InstallEvent.registerRouter() em vez de InstallEvent.addRoutes(), e o método registerRouter() só podia ser chamado uma vez. Essa mudança foi baseada no feedback da comunidade sobre o teste de origem.

A nova API também aproveita as mudanças na URLPattern introduzidas no Chrome 121, adiciona a capacidade de especificar um método, modo e destino de solicitação e adiciona outras opções de origem.

Suporte no Chrome DevTools

As regras de roteador registradas são exibidas na guia Service Worker do painel Application.

No painel Rede, se a solicitação corresponder à regra registrada, isso será indicado na coluna de tamanho. Ao manter o cursor sobre a coluna de tamanho, o ID do roteador registrado é mostrado. As regras correspondentes são exibidas na guia do aplicativo.