score:0

I believe the cache attributes will only effect the index.html not it's dependent files. To do this with java script files you'd have to do something server side to write those values into the response header. You could try adding query string to the end of your script references something like

<script src='/dist/main.js?v=123'></script>

and increment that version number with each release.

If you're feeling bold you could add hashing to your filenames. This would require ejecting your configuration from create-react-app and isn't a step to take likely. You could also look into one of the somewhat dicey methods of customizing the webpack configuration without ejecting.

score:1

Add this code to registerServiceWorker.js. It will reload the page once a new service worker is activated. I usually add it inside the registerValidSW function as shown below:

    function registerValidSW(swUrl) {

    //Reload once the new service worker is activated.
      var refreshing;
      navigator.serviceWorker.addEventListener('controllerchange',
        function () {
          if (refreshing) return;
          refreshing = true;
          window.location.reload();
        }
      );


//Below code is create-react-app default
      navigator.serviceWorker
        .register(swUrl)
        .then(registration => {
          registration.onupdatefound = () => {
            const installingWorker = registration.installing;
            installingWorker.onstatechange = () => {
              if (installingWorker.state === 'installed') {
                if (navigator.serviceWorker.controller) {
                  // 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 your web app.
                  console.log('New content is available; please refresh.');
                  // window.location.reload(true);
                } else {
                  // At this point, everything has been precached.
                  // It's the perfect time to display a
                  // "Content is cached for offline use." message.
                  console.log('Content is cached for offline use.');
                }
              }
            };
          };
        })
        .catch(error => {
          console.error('Error during service worker registration:', error);
        });
    }

I noticed that with create-react-app, often successive builds ended up with the same hashed file name. This was causing the app to reuse the old cached files.

To resolve, I rename the old build directory to 'build.old' and then run a fresh build. This way there is a very slim chance that the build will reuse an old file name.

Once build is done, add the below link to service-worker.js:

self.skipWaiting();

This will force the new service worker to be activated even while the existing one is still running.

Add Below headers to both your index.html & service-worker.js:

cache-control: max-age=0,no-cache,no-store,must-revalidate

score:2

A common method is to put a unique hash in the JS file so the browser goes off and fetches what it believes to be a completely different file from what was there before.

If you're using Webpack (as I assume you are with create-react-app) then you can add [hash] into your output JS file name:

output: {
    filename: 'bundle.[hash].js',
},

Related Query

More Query from same tag