Vue PWA not getting new content after refresh

Question

I'm new to Vue and created a project with the PWA Service-worker plugin. After deploying a new version of my App I get these messages in console:

After refreshing the page (F5) these messages still appear the same way and the App is still in it's old state. I tried everything to clear the cache but it still won't load the new content.

I haven't changed anything from the default config after creating my project and didn't add any code which interacts with the serviceworker. What is going wrong? Am I missing something?

Answer 1

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.