A partir do Chrome 123, a API de roteamento estático do Service Worker está disponível. Essa API permite declarar como determinados caminhos de recursos devem ser buscados. Isso significa que o navegador não precisa executar um service worker apenas para buscar respostas de um cache ou diretamente da rede. Essa API está em teste de origem desde o Chrome 116, e 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 URLPattern ou uma string que representa um URLPattern válido e pode ser transmitida ao construtorURLPattern.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 da solicitação.runningStatus: uma string,"running"ou"not-running". Isso indica o status de execução do service worker.
source- Especifica como os recursos que correspondem a
conditionsã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 encaminhados 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 o trajeto seja usado.
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 service worker.
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 .png ou .jpg.
addEventListener('install', (event) => {
event.addRoutes({
condition: {
or: [
{urlPattern: "*.png"},
{urlPattern: "*.jpg"}
]
},
source: {
cacheName: "pictures"
}
});
});
Mudanças no 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 no URLPattern introduzidas no Chrome 121, adiciona a capacidade de especificar um método, modo e destino de solicitação e inclui mais 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 "Tamanho", o ID do roteador registrado é mostrado. As regras correspondentes são mostradas na guia "Aplicativo".
