Ionic 4 caching on browser and not reacting to updates until cache is cleared

I’m using firebase hosting for my web app which is built with Ionic 4 using a template. After every update I implement and deploy to my hosting, the app displays a cached version of the UI and only displays the new deployed update after I hit ctrl+f5. I don’t have much experience with service workers, however with a quick google search I think the problem is in my service-worker.js file:

importScripts('./build/sw-toolbox.js');

self.toolbox.options.cache = {
  name: 'ionic-cache'
};

self.toolbox.precache(
  [
    './build/main.js',
    './build/vendor.js',
    './build/main.css',
    './build/polyfills.js',
    'index.html',
    'manifest.json',
    'https://fonts.googleapis.com/css?family=Changa&display=swap'
  ]
);

self.toolbox.router.any('/*', self.toolbox.fastest);

self.toolbox.router.default = self.toolbox.networkFirst;

Can someone point me to how can I disable this behavior or perhaps have the service worker clear the cache automatically if there are new updates deployed to the hosting?

Thanks in advance.

1 Like