PWA: Service Worker Secrets, Tricks, Debugging

/*  Website Booster & Offline Denis.es Blog Service Worker
    https://www.denis.es/blog/pwa-service-worker-problems-secrets-tricks-debugging/
*/


// Increment this each time you change assets that are not part of the 'Stale-while-revalidate' strategy.
const VERSION = 'v1_0_2'; 

const CACHE_NAME = `denises-${VERSION}`;

// Offline page with manual and automatic reload based on the online event and regular server polling.
const OFFLINE_URL = '/assets/andy/pwa/offline-denises-advanced.html';

// A special asset for detecting the deletion of our offline assets. It's actually an image that you either only use on an offline page or do not use at all.
const OFFLINE_ASSETS_LOST_IMG = '/assets/andy/img/offline.png';
// The problem: We add the resources required for the offline page during 'install' event. 
// However, if the service worker is already installed, these resources will not be added if they were removed 
// from the cache for some reason (Apple with their Safari will do this for sure). At the same time, we don't 
// have these assets on every page because we use minified JS and CSS on other pages. This means that we must 
// regularly update the offline page assets on one basis or another. To do this, I came up with this "hack".
// Why not use the page itself? I have found that some browsers keep HTML longer than other assets.

// Static resources to cache initially (or as Google call it "Cache the application shell" https://developers.google.com/web/ilt/pwa/lab-caching-files-with-service-worker)
// Setting {cache: 'reload'} in the new request will ensure that the response isn't fulfilled from the HTTP cache; i.e., it will be from the network.
const INITIAL_CACHED_RESOURCES = [
  //new Request('/', { cache: "reload" }), // This will put the root page, actually the HTML of that page (or destination=document), and we don't need that because we don't want the HTML to be served from the cache other than the offline page. 
  new Request(OFFLINE_URL, { cache: "reload" }), // HTML of our offline page. 
  new Request(OFFLINE_ASSETS_LOST_IMG, { cache: "reload" }), 
  //new Request('/assets/andy/pwa/service-worker-denises.js', { cache: "reload" }), // The reason for caching the service worker has not yet been found.
  new Request('/assets/andy/pwa/manifest-denises.json?v1=2022051601', { cache: "reload" }), // Since we are calling the manifest on every page, let's cache it.
  
  // Below we should list all the assets of our offline page and anything else
  // you want to cache on install, which might come in handy for browsing other pages soon.
  
  new Request('https://fonts.googleapis.com/css?family=Montserrat:400,700', { cache: "reload" }),
  new Request('https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800', { cache: "reload" }),

  new Request('/assets/common/img/ui.totop.png', { cache: "reload" }),
  new Request('/media/img-uncuted-common/den.jpg', { cache: "reload" }),
  
  new Request('/assets/andy/css/bootstrap.min.css', { cache: "reload" }),
  new Request('/assets/common/css/font-awesome-our.min.css', { cache: "reload" }),
  new Request('/assets/andy/css/style.min.css', { cache: "reload" }),
  new Request('/assets/andy/iot-den/styles.min.css', { cache: "reload" }),
  new Request('/assets/andy/css/colors/green.min.css', { cache: "reload" }),
  
  new Request('/assets/andy/js/blog-essentials-v1.min.js', { cache: "reload" }),
  new Request('/assets/andy/plugins/highlight/highlight-our.min.js', { cache: "reload" }),
  new Request('/assets/andy/js/jquery-migrate-3.4.0.min.js', { cache: "reload" }),
  new Request('/assets/andy/js/inview-protonet.min.js', { cache: "reload" }),
  new Request('/assets/andy/js/jquery.stellar.min.js', { cache: "reload" }),
  new Request('/assets/common/plugins/jquery-validate/jquery.validate.min.js', { cache: "reload" }),
  new Request('/assets/andy/js/jquery-easing-1.3.min.js', { cache: "reload" }),
  new Request('/assets/andy/js/jquery.ui.totop.min.js', { cache: "reload" }),
  new Request('/assets/common/plugins/jssocials/jssocials-0.2.0-our_mod.min.js', { cache: "reload" }),
  new Request('/assets/common/plugins/jquery.countdown/jquery.countdown.min.js', { cache: "reload" }),
  new Request('/assets/common/plugins/d3/d3.min.js', { cache: "reload" }),
  new Request('/assets/andy/js/d3TextFlow.min.js', { cache: "reload" }),
  new Request('/assets/andy/js/script_v2.min.js', { cache: "reload" }), // We may change this JS often.
 
  // From the manifest file and meta.
  new Request('/assets/andy/icons/denis/favicon-sketch-48x48.png?v1=2022051601', { cache: "reload" }),
  new Request('/assets/andy/icons/denis/apple-touch-icon-sketch-192x192.png?v1=2022051601', { cache: "reload" }),
  new Request('/assets/andy/icons/denis/round-sketch-192x192.png?v1=2022051601', { cache: "reload" }),
  new Request('/assets/andy/icons/denis/round-sketch-512x512.png?v1=2022051601', { cache: "reload" }),
  new Request('/assets/andy/icons/denis/maskable-sketch-192x192.png?v1=2022051601', { cache: "reload" }),
  new Request('/assets/andy/icons/denis/maskable-sketch-512x512.png?v1=2022051601', { cache: "reload" }),
];

self.addEventListener('install', (event) => {
// Use the install event to pre-cache all initial resources.
// If any assets fail to cache, the service worker installation is aborted.
  console.log('[Service Worker] Install');
  event.waitUntil((async () => {
      const cache = await caches.open(CACHE_NAME);
      console.log('[Service Worker] Caching INITIAL_CACHED_RESOURCES on install');
      await cache.addAll(INITIAL_CACHED_RESOURCES);
  })());
  // Force the waiting service worker to become the active service worker:
  self.skipWaiting();
});

self.addEventListener('activate', (event) => {
// Use the activate event to enable navigation preload and to delete old caches and avoid running out of space.
  event.waitUntil((async () => {
    // Enable navigation preload if it's supported by browser.
    // MUST read and understand: https://developers.google.com/web/updates/2017/02/navigation-preload
    if ('navigationPreload' in self.registration) {
      await self.registration.navigationPreload.enable();
      console.log('[Service Worker] navigationPreload is supported');
    }
    // Delete old cache.
    const names = await caches.keys();
    await Promise.all(names.map(name => {
      if (name !== CACHE_NAME) {
        return caches.delete(name);
      }
    }));
  })());
  // Tell the active service worker to take control of the page immediately:
  self.clients.claim();
});

// ###########################################################################
// ####### 'Network-only' strategy for HTML with offline page fallback #######
// ###########################################################################

// Almost a direct copy of https://web.dev/offline-fallback-page/ with my detailed comments.
// This strategy means that we will never display HTML (or 'document') from the cache, even if it was somehow placed in the cache.
// If we tried the 'Cache-first' strategy here, we would never fall back to our offline page if the HTML ('document') is in the cache.
// And then we would also need a mechanism to keep this cache up to date.
self.addEventListener('fetch', (event) => {

    // We will only call event.respondWith() if this is a navigation request for an HTML page.
    // See https://developer.mozilla.org/en-US/docs/Web/API/Request/mode
    // This allows us to treat page assets differently in the handlers that follow this one.
    if (event.request.mode === 'navigate') {
    event.respondWith((async () => {
    try {            
          // First, try to use the navigation preload response if it's supported (must, if you enabled it!):
          const preloadResponse = await event.preloadResponse;
          if (preloadResponse) return preloadResponse; 
          // Else try the network (nothing in the preloaded response):
          
          const networkResponse = await fetch(event.request);
          return networkResponse;
          // Else, we catch the error and show our offline page that supports auto reload, and once online the user will see the requested page:

        } catch (error) {
          // This 'catch' is only triggered if an exception is thrown, which is likely due to a network error.
          // If fetch() returns a valid HTTP response with a response code in the 4xx or 5xx range, the catch() will NOT be called.
          console.log('[Service Worker] Fetch failed; returning offline page instead.', error);          
          const cache = await caches.open(CACHE_NAME);
          const cachedResponse = await cache.match(OFFLINE_URL);
          return cachedResponse;
      }
    })());
  }

  // If our if() condition is false, then this fetch handler won't intercept the request. 
  // Other fetch handlers registered below will get a chance to call event.respondWith() and handle assets of the page differently.
  // If no fetch handlers call event.respondWith(), the request will be handled by the browser as if there were no service worker involvement.
  
  // If you don't need the cache at all, you should stop here and comment out any handlers below.
  // "While you can have more than one fetch event handler per service worker, only one can respond per request. For example,
  // you can have different handlers that will act on different URL patterns. They are executed in the order they were 
  // registered until one of them calls respondWith()." https://web.dev/learn/pwa/serving/#the-fetch-event
});


// ################################
// ####### CACHE STRATEGIES ####### 
// ################################

self.addEventListener("fetch", event => {

  // ########################################################################################
  // ####### 'Stale-while-revalidate' to keep up to date assets that we often editing #######
  // ########################################################################################
  // https://web.dev/learn/pwa/serving/#stale-while-revalidate
  // https://web.dev/offline-cookbook/#stale-while-revalidate
  // https://developer.chrome.com/docs/workbox/caching-strategies-overview/#stale-while-revalidate

  // We only want to update our assets each time, not Google fonts, etc...
  if (
      // Only our styles, all styles.
      (event.request.destination === 'style') && (event.request.url.includes('/assets/') || event.request.url.includes('/minify/'))
      
      // If we uncomment this line, then our JS files will be requested from the network every time the page is loaded.
      // This creates unnecessary network traffic if we don't edit these files often.
      // So we can decide to comment out this line and uncomment the corresponding line in the next 'else if'.
      // In this case, we need to increment the cache version number every time we change some of these JS files, because the next 'else if' will not update the cache.
      //|| (event.request.destination === 'script') && (event.request.url.includes('/assets/') || event.request.url.includes('/minify/'))
      
      // We want to update this on every page load because we edit it frequently.
      || event.request.url.includes('/assets/andy/js/script_v2.min.js')
     ) 
  {
    event.respondWith((async () => {
    try {
          const cache = await caches.open(CACHE_NAME);
          
          const cachedResponse = await cache.match(event.request);
          const fetchedResponse = await fetch(event.request);

          // Since each page will have resources from the /minify/ folder, we will always hit this first 'if' and
          // so this is the best place to take care of our offline resources.

          // Check if we still keep assets for the offline page:
          const CheckOfflineCache = await cache.match(OFFLINE_ASSETS_LOST_IMG);
          if (CheckOfflineCache === undefined) {
          // OFFLINE_ASSETS_LOST_IMG not found in cache, so we assume our offline assets are deleted.
          console.log('[Service Worker] assets for offline not found');
          // Add them again:
          cache.addAll(INITIAL_CACHED_RESOURCES);
          console.log('[Service Worker] Caching INITIAL_CACHED_RESOURCES again');
          } 
      
          // Update the cache with a clone of the network response.
          // "The Response's body is a ReadableStream that can only be consumed once" (https://web.dev/learn/pwa/serving/#stale-while-revalidate), so we must clone.
          cache.put(event.request, fetchedResponse.clone());
          
          // Prioritize cached response over network.
          // If the user has a cache from a previous visit, they will see cached assets on the first page load and updated on the second load.
          // '|| fetchedResponse" allows the user to see assets from the network if they don't have that asset in the cache yet.
          // So performance will be as good as for the cache-first if your app can tolerate one page load on old assets.
          return cachedResponse || fetchedResponse;
        
        } catch (error) {
          // Like in the 'Network-only' strategy we 'catch' error when an exception is thrown, which is likely due to a network error.
          // We need this to serve assets that match our 'if' condition from the cache, otherwise they will never be taken from there, 
          // because we promised to wait for the 'fetchedResponse' too and we would get 'Uncaught (in promise) TypeError: Failed to fetch'.
          console.log('[Service Worker] Fetch failed (Stale-while-revalidate); returning offline resources.', error);          
          const cache = await caches.open(CACHE_NAME);
          const cachedResponse = await cache.match(event.request);
          return cachedResponse;
          }
     })());
  }
  
  // ################################################################################################################################
  // ####### 'Cache-first' with 'Cache-as-you-browse' approach fast browsing experience and filling the cache with new assets #######
  // ################################################################################################################################
  // https://developer.chrome.com/docs/workbox/caching-strategies-overview/#cache-first-falling-back-to-network
  // https://web.dev/offline-cookbook/#cache-then-network
  
  // We still need to choose what we want to cache.
  // If you ever update these assets, you need to increment the cache version number!
  else if (
      // Don't put into the cache some odd stuff (see Network -> Initiator in DevTools).
      (!event.request.url.includes('google-analytics') && 
       !event.request.url.includes('browser-sync')  && 
       !event.request.url.includes('chrome-extension') && 
       !event.request.url.includes('twitter')) && 
    
      // Cache based on destinations (https://developer.mozilla.org/docs/Web/API/Request/destination) and URLs. 
      // Also exclude what we had in our first 'if'.

      // Caching images, only ours.
      event.request.url.includes('/media/') ||  ((event.request.destination === 'image') && event.request.url.includes('/assets/')) || 
     
      // Styles that are not ours (mainly to handle Google font caching).
      // We assume that all of our standalone styles were cached initially.
      ((event.request.destination === 'style') && (!event.request.url.includes('/assets/') || !event.request.url.includes('/minify/')))
      
      // If we uncomment this line, our JS files will never be updated.
      // This will only cache our JS files, not external ones (external ones will fall to the last 'else', where we do NOT cache anything).
      // If we use this (i.e. uncommented), we need to increment the cache version every time we change some of these JS files.
      // We also need to comment out the corresponding line in the 'if' above if we uncomment this one.
      || ((event.request.destination === 'script') && (event.request.url.includes('/assets/') || event.request.url.includes('/minify/') && !event.request.url.includes('/assets/andy/js/script_v2.min.js')))
    
      // Fonts that are not styles but fonts.
      || (event.request.destination === 'font')
    )
  {
    event.respondWith((async () => {
    try {
          const cache = await caches.open(CACHE_NAME);

          // Try the cache first:
          const cachedResponse = await cache.match(event.request);
          if (cachedResponse !== undefined) {
          // Found in cache, let's send the cached resource immideately:
          //console.log('[Service Worker] return cachedResponse');  // Heavily spamming to console.
          return cachedResponse;
          } 
          else {
          // Nothing in cach, try the network (and put to cache async):
          
          const fetchedResponse = await fetch(event.request);
          {
            // Save the new resource in the cache:
            //const ASSETS_TYPE = event.request.destination;
            //console.log('[Service Worker] ASSETS TYPE:', ASSETS_TYPE);  // Heavily spamming to console.
            cache.put(event.request, fetchedResponse.clone());
          }
          
          // And return it:
          //console.log('[Service Worker] return fetchedResponse'); // Heavily spamming to console.
          return fetchedResponse;
          }

        } catch (error) {
          // The same reason as described above.
          console.log('[Service Worker] Fetch failed (Cache-first && Cache-as-you-browse); returning offline resources.', error);          
          const cache = await caches.open(CACHE_NAME);
          const cachedResponse = await cache.match(event.request);
          return cachedResponse;
          }
    })());
  }
  
  // ################################################################
  // ####### 'Cache-first' without putting into the cache.   #######
  // ################################################################
  // A kind of default, for offline page mainly.
  // https://web.dev/learn/pwa/serving/#cache-first
  // https://microsoft.github.io/win-student-devs/#/30DaysOfPWA/core-concepts/05?id=_2-cache-first-on-fetch-retrieval

  // For other things, we use cache-first without putting it into the cache.
  // We need this because our offline page is also controlled by a service worker (many people don't realize this!).
  // The offline page is triggered when the catch in 'Network-only' is triggered, this will just be the HTML of this page.
  // Other assets on the offline page will pass our first 'if', then the second 'else if', but if they don't match the conditions?
  // Then they will not catch an error there, but will fall into this 'else', where we serve them from the cache. 
  // We may not have a 'cache-only' strategy here because when we are online, some other resources will go into this state and will get the
  // error 'The FetchEvent for ... resulted in a network error response: an object that was not a Response was passed to respondWith().'
  // Therefore, we must have network fallback for them.
  else
  {
    event.respondWith((async () => {
    try {
          const cache = await caches.open(CACHE_NAME);

          // Try the cache first:
          const cachedResponse = await cache.match(event.request);
          if (cachedResponse !== undefined) {
          // Found in cache, let's send the cached resource immideately:
          //console.log('[Service Worker] return cachedResponse');  // Heavily spamming to console.
          return cachedResponse;
          } 
          else {
            const fetchedResponse = await fetch(event.request);
            return fetchedResponse;
          }
        } catch (error) {
          // Almost the same as described for 'catch' after the first 'if' with the only difference being that here we have already provided
          // all possible assets from the cache, so we have that 'catch' here mainly to avoid 'Uncaught (in promise) TypeError: Failed to fetch'
          // errors. So we could only have the console log here and nothing else.
          console.log('[Service Worker] Fetch failed (Cache-first); returning offline resources.', error);          
          const cache = await caches.open(CACHE_NAME);
          const cachedResponse = await cache.match(event.request);
          return cachedResponse;
          }
    })());
  }
});