A partir de Chrome 123, está disponible la API de Service Worker Static Routing. Esta API te permite declarar cómo se deben recuperar ciertas rutas de recursos, lo que significa que el navegador no necesita ejecutar un service worker solo para recuperar respuestas de una caché o directamente de la red. Esta API se encuentra en prueba de origen desde Chrome 116, y en esta publicación se detalla su lanzamiento en Chrome 123.
Cómo usar la API
Para usar la llamada a la API, llama a event.addRoutes en el evento install del trabajador de servicio. Pasa a este método una lista de rutas con las siguientes propiedades:
condition- Especifica cuándo se aplica la regla. Acepta las siguientes propiedades:
urlPattern: Es una instancia de URLPattern o una cadena que representa un URLPattern válido que se puede pasar al constructorURLPattern.requestMethod: Es una cadena que contiene un método de solicitud.requestMode: Es una cadena que contiene un modo de solicitud.requestDestination: Es una cadena que contiene un destino de la solicitud.runningStatus: Es una cadena, ya sea"running"o"not-running". Indica el estado de ejecución del Service Worker.
source- Especifica cómo se cargan los recursos que coinciden con
condition. Una de las siguientes cadenas:"network""cache""fetch-event""race-network-and-fetch-handler"
En el siguiente ejemplo, las URLs que comienzan con "/articles" se enrutan al service worker si se está ejecutando. Cuando hay varias condiciones, por ejemplo, urlPattern y runningStatus, se deben cumplir todas para que se use la ruta.
addEventListener('install', (event) => {
event.addRoutes({
condition: {
urlPattern: "/articles/*",
runningStatus: "running"
},
source: "fetch-event"
});
});
En el siguiente ejemplo, las publicaciones en un formulario se envían directamente a la red y omiten el service worker.
addEventListener('install', (event) => {
event.addRoutes({
condition: {
urlPattern: "/form/*",
requestMethod: "post"
},
source: "network"
});
});
En el siguiente ejemplo, el almacenamiento de caché llamado "pictures" se usa para recuperar archivos con una extensión de archivo .png o .jpg.
addEventListener('install', (event) => {
event.addRoutes({
condition: {
or: [
{urlPattern: "*.png"},
{urlPattern: "*.jpg"}
]
},
source: {
cacheName: "pictures"
}
});
});
Cambios desde la prueba de origen
En la prueba de origen original, se usaba InstallEvent.registerRouter() en lugar de InstallEvent.addRoutes(), por lo que el método registerRouter() solo se podía llamar una vez. Este cambio se basó en los comentarios de la comunidad sobre la prueba de origen.
La nueva API también aprovecha los cambios en URLPattern que se introdujeron en Chrome 121, agrega la capacidad de especificar un método, un modo y un destino de solicitud, y agrega opciones de origen adicionales.
Compatibilidad en las Herramientas para desarrolladores de Chrome
Las reglas del router registradas se muestran en la pestaña Service Worker del panel Application.
En el panel Network, si la solicitud coincide con la regla registrada, se indica en la columna de tamaño. Cuando mantienes el puntero sobre la columna de tamaño, se muestra el ID del router registrado. Las reglas correspondientes se muestran en la pestaña de la aplicación.
