A partire da Chrome 123, è disponibile l'API Service Worker Static Routing. Questa API consente di dichiarare in modo dichiarativo come devono essere recuperati determinati percorsi delle risorse, il che significa che il browser non deve eseguire un service worker solo per recuperare le risposte da una cache o direttamente dalla rete. Questa API è in prova dell'origine da Chrome 116 e questo post descrive il lancio dell'API in Chrome 123.
Utilizzare l'API
Per utilizzare la chiamata API event.addRoutes sull'evento install del service worker. Passa a questo metodo un elenco di route, con le seguenti proprietà:
condition- Specifica quando si applica la regola. Accetta le seguenti proprietà:
urlPattern: un'istanza URLPattern o una stringa che rappresenta un URLPattern valido, che può essere passata al costruttoreURLPattern.requestMethod: una stringa contenente un metodo Request.requestMode: una stringa contenente una modalità di richiesta.requestDestination: una stringa contenente una destinazione della richiesta.runningStatus: una stringa,"running"o"not-running". Indica lo stato di esecuzione del service worker.
source- Specifica come vengono caricate le risorse corrispondenti a
condition. Una delle seguenti stringhe:"network""cache""fetch-event""race-network-and-fetch-handler"
Nell'esempio seguente, gli URL che iniziano con "/articles" vengono indirizzati al service worker se è attualmente in esecuzione. Se sono presenti più condizioni, ad esempio urlPattern e runningStatus, tutte devono essere soddisfatte affinché l'itinerario venga utilizzato.
addEventListener('install', (event) => {
event.addRoutes({
condition: {
urlPattern: "/articles/*",
runningStatus: "running"
},
source: "fetch-event"
});
});
Nell'esempio seguente, i post a un modulo vengono inviati direttamente alla rete e bypassano il service worker.
addEventListener('install', (event) => {
event.addRoutes({
condition: {
urlPattern: "/form/*",
requestMethod: "post"
},
source: "network"
});
});
Nell'esempio seguente, l'archivio cache denominato "pictures" viene utilizzato per recuperare i file con estensione .png o .jpg.
addEventListener('install', (event) => {
event.addRoutes({
condition: {
or: [
{urlPattern: "*.png"},
{urlPattern: "*.jpg"}
]
},
source: {
cacheName: "pictures"
}
});
});
Modifiche rispetto alla prova dell'origine
La prova dell'origine originale utilizzava InstallEvent.registerRouter() anziché InstallEvent.addRoutes() e il metodo registerRouter() poteva essere chiamato una sola volta. Questa modifica è stata apportata in base al feedback della community sulla prova dell'origine.
La nuova API sfrutta anche le modifiche a URLPattern introdotte in Chrome 121, aggiunge la possibilità di specificare un metodo, una modalità e una destinazione della richiesta e aggiunge ulteriori opzioni di origine.
Supporto in Chrome DevTools
Le regole del router registrate vengono visualizzate nella scheda Service Worker del riquadro Applicazione.
Nel riquadro Rete, se la richiesta corrisponde alla regola registrata, questo viene indicato nella colonna delle dimensioni. Quando tieni il puntatore sopra la colonna delle dimensioni, viene visualizzato l'ID router registrato. Le regole corrispondenti vengono visualizzate nella scheda dell'applicazione.
