A partir de Chrome 123, la API de enrutamiento estático de Service Worker está disponible. Esta API te permite declarar de forma declarativa 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 el lanzamiento de la API en Chrome 123.
Cómo usar la API
Para usar la llamada a la API 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 solicitud.runningStatus: Es una cadena, ya sea"running"o"not-running". Esto 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 trabajador de servicio si está en ejecución. 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 a un formulario se envían directamente a la red y omiten el trabajador de servicio.
addEventListener('install', (event) => {
event.addRoutes({
condition: {
urlPattern: "/form/*",
requestMethod: "post"
},
source: "network"
});
});
En el siguiente ejemplo, el almacenamiento en caché llamado "pictures" se usa para recuperar archivos con una extensión de archivo de .png o .jpg.
addEventListener('install', (event) => {
event.addRoutes({
condition: {
or: [
{urlPattern: "*.png"},
{urlPattern: "*.jpg"}
]
},
source: {
cacheName: "pictures"
}
});
});
Cambios desde la prueba de origen
La prueba de origen original usaba InstallEvent.registerRouter() en lugar de InstallEvent.addRoutes(), y solo se podía llamar al método registerRouter() 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 fuente adicionales.
Compatibilidad con 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, esto se indica en la columna de tamaño. Cuando colocas 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.
