Workbox service worker not updating when Its changed

Question

Am using workbox-build-2.1.2 and workbox-sw-2.1.2 with Angular-cli-1.6.0, and everything works fine, but when I update the App and build it for production and the sw.js file is modified then in chrome browser the service worker is not updated it continues to use the old version until I manually un-register it. Should it not install the new sw.js file and when it installs the new version will it also clean the sites old data cashed and start a fresh slate automatically or do I need to set that part?.

Here is how I register sw.js in in Angulars main file:

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .then(registerServiceWorker)
  .catch(err => console.log(err));

function registerServiceWorker() {
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker
      .register('sw.js')
      .then(reg => {
        log('Registration successful', reg);
        reg.onupdatefound = () => {
          const installingWorker = reg.installing;
          installingWorker.onstatechange = () => {
            switch (installingWorker.state) {
              case 'installed':
                if (navigator.serviceWorker.controller) {
                  log('New or updated content is available', installingWorker);
                } else {
                  log('Content is now available offline', installingWorker);
                }
                break;
              case 'redundant':
                console.error('The installing service worker became redundant', installingWorker);
                break;
              default:
                log(installingWorker.state);
                break;
            }
          };
        };
      })
      .catch(e => {
        console.error('Error during service worker registration:', e);
      });
  } else {
    console.warn('Service Worker is not supported');
  }
}

my generate-sw file that i run with npm

const workboxBuild = require('workbox-build');
const SRC_DIR = 'src';
const BUILD_DIR = 'public';
const SW = 'sw.js';
const globPatterns = [
  "**/*.{ico,html,css,js,woff,json}"
];

const globIgnores = [
  "sw.js"
];

const input = {
  swSrc: `${SRC_DIR}/${SW}`,
  swDest: `${BUILD_DIR}/${SW}`,
  globDirectory: BUILD_DIR,
  globPatterns: globPatterns,
  globIgnores: globIgnores,
  maximumFileSizeToCacheInBytes: 4000000
};

workboxBuild.injectManifest(input).then(() => {
  console.log(`The service worker ${BUILD_DIR}/${SW} has been injected`);
});

and the base sw.js file

importScripts('workbox-sw.prod.v2.1.2.js');

const workboxSW = new self.WorkboxSW({clientsClaim: true});

workboxSW.precache([]);

workboxSW.router.registerNavigationRoute('/index.html');

*****Update*****

Using express.js for the development server I set the Cache-Control to zero and now when I reload the page the service worker updates to the newer version. Am confused in production with Cache-Control set to days/years how long does it take for a service worker to update then and will it clear the old cash and indexDB or do we have to do it manually

here is the code for express:

app.use('/', express.static(publicFolderPath, {maxAge: 0}));
app.get('*', (req, res) => {
  res.sendFile('index.html');
}); 

Radu

Possible duplicate of Service worker JavaScript update frequency (every 24 hours?) – Dutcher

Make sure the sw.js actually changes. If it does not change, but you update the scripts you import the browser does not know those files have updated. I found a similar behavior when I started abstracting my logic to separate files. Drives me nutz :) The best practice I have for you is when you update the logic scripts you should also rev your service worker. I have a version parameter in my sw.js files and rev them when needed. – Perigynous

Jeff thanks for the link but is my server worker fine then and its only the browser protecting the end user and it will update every 24hours if it has changed no matter how long Cache-Control is set to. What about the cache will it clear the data automatic? .Chris I tried adding a version parameter and kept updating it but the browser would not reload it, I was about to also revision the file name just to get it to update. – Radu

Answer 1

• Service worker won't change while the site is open and it has been updated on the server (that is it won't change in background), it will change when the site is opened after it has been updated. Make sure that the browser isn't caching it, its cache TTL/max-age should be set to 0
• New service worker won't out of the box clean the old service worker's cache, you will need to do this housekeeping manually on 'Activate' event

Eg:

self.addEventListener('activate', function(event) {
  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.filter(function(cacheName) {
          // Return true if you want to remove this cache,
          // but remember that caches are shared across
          // the whole origin
        }).map(function(cacheName) {
          return caches.delete(cacheName);
        })
      );
    })
  );
});

Refer this link: https://developers.google.com/web/ilt/pwa/caching-files-with-service-worker

Hope this helps

Throughcomposed