diff --git a/src/sw.js b/src/sw.js index c6b5f3e..6b132c0 100644 --- a/src/sw.js +++ b/src/sw.js @@ -6,38 +6,33 @@ const cacheName = `${__prefix ?? 'app'}-v${__version ?? '000'}` const addResourcesToCache = async (resources) => { const cache = await caches.open(cacheName); - console.log('adding resources to cache...', resources) + console.log('[cozy-sw]: adding resources to cache...', resources) await cache.addAll(resources); }; const putInCache = async (request, response) => { const cache = await caches.open(cacheName); - console.log('adding one response to cache...', request) + console.log('[cozy-sw]: adding one response to cache...', request) await cache.put(request, response); }; -const cacheFirst = async ({ request, preloadResponsePromise, fallbackUrl }) => { - // First try to get the resource from the cache - const responseFromCache = await caches.match(request); - if (responseFromCache) { - return responseFromCache; - } +const networkFirst = async ({ request, preloadResponsePromise, fallbackUrl }) => { - // Next try to use the preloaded response, if it's there - // NOTE: Chrome throws errors regarding preloadResponse, see: - // https://bugs.chromium.org/p/chromium/issues/detail?id=1420515 - // https://github.com/mdn/dom-examples/issues/145 - // To avoid those errors, remove or comment out this block of preloadResponse - // code along with enableNavigationPreload() and the "activate" listener. - const preloadResponse = await preloadResponsePromise; - if (preloadResponse) { - console.info('using preload response', preloadResponse); - putInCache(request, preloadResponse.clone()); - return preloadResponse; - } - - // Next try to get the resource from the network try { + // Try to use the preloaded response, if it's there + // NOTE: Chrome throws errors regarding preloadResponse, see: + // https://bugs.chromium.org/p/chromium/issues/detail?id=1420515 + // https://github.com/mdn/dom-examples/issues/145 + // To avoid those errors, remove or comment out this block of preloadResponse + // code along with enableNavigationPreload() and the "activate" listener. + const preloadResponse = await preloadResponsePromise; + if (preloadResponse) { + console.info('using preload response', preloadResponse); + putInCache(request, preloadResponse.clone()); + return preloadResponse; + } + + // Next try to get the resource from the network const responseFromNetwork = await fetch(request.clone()); // response may be used only once // we need to save clone to put one copy in cache @@ -45,10 +40,19 @@ const cacheFirst = async ({ request, preloadResponsePromise, fallbackUrl }) => { putInCache(request, responseFromNetwork.clone()); return responseFromNetwork; } catch (error) { + + // Try get the resource from the cache + const responseFromCache = await caches.match(request); + if (responseFromCache) { + return responseFromCache; + } + + // Try the fallback const fallbackResponse = await caches.match(fallbackUrl); if (fallbackResponse) { return fallbackResponse; } + // when even the fallback response is not available, // there is nothing we can do, but we must always // return a Response object @@ -57,6 +61,7 @@ const cacheFirst = async ({ request, preloadResponsePromise, fallbackUrl }) => { headers: { 'Content-Type': 'text/plain' }, }); } + }; const enableNavigationPreload = async () => { @@ -67,12 +72,12 @@ const enableNavigationPreload = async () => { }; self.addEventListener('activate', (event) => { - console.log('activating...', event) + console.log('[cozy-sw]: activating...', event) event.waitUntil(enableNavigationPreload()); }); self.addEventListener('install', (event) => { - console.log('installing...', event) + console.log('[cozy-sw]: installing...', event) event.waitUntil( addResourcesToCache([ './', @@ -83,9 +88,11 @@ self.addEventListener('install', (event) => { }); self.addEventListener('fetch', (event) => { - console.log('fetch happened', event.request) + console.log('[cozy-sw]: fetch happened, trying network first', event.request) + + // ... else, use cache first event.respondWith( - cacheFirst({ + networkFirst({ request: event.request, preloadResponsePromise: event.preloadResponse, fallbackUrl: './',