A partire da Chrome 123, è disponibile l'API di routing statico di Service Worker. Questa API ti consente di dichiarare in modo esplicito come devono essere recuperati determinati percorsi delle risorse, il che significa che il browser non deve eseguire un servizio 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 illustra il lancio dell'API in Chrome 123.
Utilizzare l'API
Per utilizzare la chiamata API event.addRoutes nell'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 di URLPattern o una stringa che rappresenta un URLPattern valido, che può essere passato al costruttoreURLPattern.requestMethod: una stringa contenente un metodo di richiesta.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 in che modo 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, è necessario che tutte le condizioni siano soddisfatte affinché la route venga utilizzata.
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 ignorano il service worker.
addEventListener('install', (event) => {
event.addRoutes({
condition: {
urlPattern: "/form/*",
requestMethod: "post"
},
source: "network"
});
});
Nell'esempio seguente, lo spazio di archiviazione della 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(), il metodo registerRouter() poteva essere chiamato una sola volta. Questa modifica si basa sui 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 altre opzioni di origine.
Assistenza 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 passi il mouse sopra la colonna delle dimensioni, viene visualizzato l'ID router registrato. Le regole corrispondenti vengono visualizzate nella scheda dell'applicazione.
