Vue PWA not getting new content after refresh

Question

As I figured out, this question is really only related to beginners in PWA, which don't know that you can (and need) to configure PWA for achieving this. If you feel addressed now (and using VueJS) remember:

To automatically download the new content, you need to configure PWA. In my case (VueJS) this is done by creating a file vue.config.js in the root directory of my project (On the same level as package.json).

Inside this file you need this:

module.exports = {
    pwa: {
        workboxOptions: {
            skipWaiting: true
        }
    }
}

Which will automatically download your new content if detected. However, the content won't be displayed to your client yet, since it needs to refresh after downloading the content. I did this by adding window.location.reload(true) to registerServiceWorker.js in my src/ directory:

updated () {
    console.log('New content is available: Please refresh.')
    window.location.reload(true)
},

Now, if the Service Worker detects new content, it will download it automatically and refresh the page afterwards.

I figured out a different approach to this and from what I've seen so far it works fine.

updated() {
      console.log('New content is available; please refresh.');
      caches.keys().then(function(names) {
        for (let name of names) caches.delete(name);
      });
    },

What's happening here is that when the updated function gets called in the service worker it goes through and deletes all the caches. This means that your app will start up slower if there is an update but if not then it will serve the cached assets. I like this approach better because service workers can be complicated to understand and from what I've read using skipWaiting() isn't recommend unless you know what it does and the side effects it has. This also works with injectManifest mode which is how I'm currently using it.