Service Worker is also Being cached in Chrome?

Question

I built a Progressive Web App, https://www.tavest.com. I don't understand why my service worker is also being cached in Chrome? https://www.tavest.com/service-worker-tavest.js So when I change the service-worker, the chrome doesn't detect the change thus the service worker is not updating.

Eventough I refresh the page many times, it's still the same. However, in Mozilla it works just fine. Here's my code for installing the service worker

if ('serviceWorker' in navigator && (window.location.protocol === 'https:')) {
      navigator.serviceWorker.register('/service-worker-tavest.js')
      .then(function(registration) {
        // updatefound is fired if service-worker.js changes.
        registration.onupdatefound = function() {
          // updatefound is also fired the very first time the SW is installed,
          // and there's no need to prompt for a reload at that point.
          // So check here to see if the page is already controlled,
          // i.e. whether there's an existing service worker.
          if (navigator.serviceWorker.controller) {
            // The updatefound event implies that registration.installing is set:
            // https://slightlyoff.github.io/ServiceWorker/spec/service_worker/index.html#service-worker-container-updatefound-event
            var installingWorker = registration.installing;

            installingWorker.onstatechange = function() {
              switch (installingWorker.state) {
                case 'installed':
                  // At this point, the old content will have been purged and the
                  // fresh content will have been added to the cache.
                  // It's the perfect time to display a "New content is
                  // available; please refresh." message in the page's interface.
                  console.warn('New content is available, please refresh the page');
                  
                  break;

                case 'redundant':
                  throw new Error('The installing ' +
                                  'service worker became redundant.');

                default:
                  // Ignore
              }
            };
          }
        };
      }).catch(function(e) {
        console.error('Error during service worker registration:', e);
      });
    }

Thank you for your help

Warm regards,

Answer 1

It's because the service worker is just a normal JS file and it will be browser-cached.

You can set no-cache header to the /service-worker-tavest.js so that the browser will stop caching your service worker file. That way you can have your service worker updated immediately when the new file is uploaded.

Here is how to do that in Nginx:

location /service-worker-tavest.js {
  # Don't use browser cache for service worker file
  add_header cache-control "no-store, no-cache, must-revalidate";
}