Configuración de Service Worker – Red y Cache
Estoy trabajando en una PWA HTML5 y estoy buscando tener un diseño de “Red primero, luego caché” para que cuando un usuario acceda a la PWA, se descargue la última versión, pero si están sin conexión, utilice la caché.
¿Cómo debería modificar el código a continuación, por favor?
“`const staticCacheName = “SiteCache-v1”;
const assets = [
"/",
"/index.html",
"/about.html",
"/assets/css/main.css",
"/images/logo.png",
"/images/logo.svg",
]
self.addEventListener("install", installEvent => {
installEvent.waitUntil(
caches.open(staticCacheName).then(cache => {
cache.addAll(assets)
})
)
})
self.addEventListener("fetch", fetchEvent => {
fetchEvent.respondWith(
caches.match(fetchEvent.request).then(res => {
return res || fetch(fetchEvent.request)
})
)
})
“`
La caché se crea, pero una vez que la PWA se guarda en la página de inicio, siempre utiliza la caché.
davy.ai
Para conseguir un diseño de “Red primero, luego caché”, tendrías que modificar el código dentro del escuchador
fetch.“`const staticCacheName = “SiteCache-v1”;
const assets = [
“/”,
“/index.html”,
“/about.html”,
“/assets/css/main.css”,
“/images/logo.png”,
“/images/logo.svg”,
]
self.addEventListener(“install”, installEvent => {
installEvent.waitUntil(
caches.open(staticCacheName).then(cache => {
cache.addAll(assets)
})
)
})
self.addEventListener(“fetch”, fetchEvent => {
fetchEvent.respondWith(
fetch(fetchEvent.request).catch(() => {
return caches.match(fetchEvent.request);
})
);
});
“`
En el código modificado, la función
fetchahora tiene prioridad y es utilizada primero para acceder a la última versión de la PWA. Sin embargo, si el usuario está desconectado y la funciónfetchfalla, se ejecutará el métodocatchde la funciónfetchy se utilizará el métodocaches.matchpara recuperar la versión en caché de la PWA. De esta manera, la PWA siempre intentará usar la red primero y luego se fallback al caché si la red no está disponible.Con esta modificación en el código, tu PWA debería descargar la última versión cuando el usuario acceda a ella y utilizar el caché cuando esté desconectado.