Tengo problemas para que funcione mi aplicación web progresiva. Necesito evitar que almacene en caché la API de Google Maps. Intenté hacerlo para que no almacene en caché nada fuera del dominio, pero parece que no puedo resolverlo.
cacheId = cacheIdRelace; staticCache = "static-" + cacheId; dynamicCache = "dynamic-" + cacheId; self.addEventListener('install', function(event) { console.log('[Service Worker] Installing Service Worker ...', event); self.skipWaiting(); event.waitUntil( caches.open(staticCache).then(function(cache) { cache.addAll(['/', '/index.html','offline/index.html', '/manifest.json', '/style/main.css']); }) ); }); self.addEventListener('activate', evt => { console.log('[Service Worker] Activating Service Worker ....'); evt.waitUntil( caches.keys().then (keys =>{ //console.log(keys); return Promise.all(keys .filter(key => key !== staticCache && key !== dynamicCache) .map(key => caches.delete(key)) ) }) ) }); self.addEventListener('fetch', evt => { evt.respondWith( caches.match(evt.request).then(cacheRes => { return cacheRes || fetch(evt.request).then(fetchRes => { return caches.open(dynamicCache).then(cache => { if ((evt.request.url).includes(window.location.host)) { cache.put(evt.request.url, fetchRes.clone()); } fetchRes.clone() return fetchRes }) }); }).catch(() => caches.match('/offline/')) ); });Agregué la siguiente declaración para tratar de evitar que almacene en caché cualquier cosa fuera del dominio local, pero hice algo mal y solo arroja errores de búsqueda.
if ((evt.request.url).includes(window.location.host)) {Debe verificar la URL y buscarla en el servidor si es la API de Google:
self.addEventListener('fetch', function (event) { // no caching google api if (event.request.url.indexOf('maps.googleapis.com/maps/api/') > -1) { event.respondWith( fetch(event.request).then( function (response) { // Check if we received a valid response if (!response) { console.error("fetch eventhandler error: no response"); return Response.error(); } if (!response.ok) { console.warn("fetch eventhandler warning: status=", response.status, response.type); return response; } // ok return response; }).catch(function () { // failed access console.error("fetch eventhandler error"); return Response.error(); })) } else { event.respondWith( caches.match(event.request).then(cacheRes => { return cacheRes || fetch(event.request).then(fetchRes => { return caches.open(dynamicCache).then(cache => { if ((event.request.url).includes(window.location.host)) { cache.put(event.request.url, fetchRes.clone()); } fetchRes.clone() return fetchRes }) }); }).catch(() => caches.match('/offline/')) ); } });El código @nechoj sniped funciona perfectamente. Solo lo modifiqué un poco para almacenar en caché solo los activos que están en el mismo dominio.
self.addEventListener('fetch', function (event) { // no caching google api if (!(event.request.url.indexOf(self.location.host) > -1)) { event.respondWith( fetch(event.request).then( function (response) { // Check if we received a valid response if (!response) { console.error("fetch eventhandler error: no response"); return Response.error(); } if (!response.ok) { console.warn("fetch eventhandler warning: status=", response.status, response.type); return response; } // ok return response; }).catch(function () { // failed access console.error("fetch eventhandler error"); return Response.error(); })) } else { event.respondWith( caches.match(event.request).then(cacheRes => { return cacheRes || fetch(event.request).then(fetchRes => { return caches.open(dynamicCache).then(cache => { cache.put(event.request.url, fetchRes.clone()); return fetchRes }) }); }).catch(() => caches.match('/offline/')) ); } });