feat: change caching strategy to network-first

src/sw.js

@@ -6,24 +6,20 @@
 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
+    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
@@ -37,7 +33,6 @@ const cacheFirst = async ({ request, preloadResponsePromise, fallbackUrl }) => {
         }
 
         // Next try to get the resource from the network
-    try {
         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: './',