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?

Did you try going to the application panel in chrome dev tools and using clear storage there? That's worked for me in the past - https://developers.google.com/web/tools/chrome-devtools/#application — chrismarx, Jan 11 '19 at 17:28
As said by @chrismarx you need to clear storage from devtools,this might be happening because you might be using a cache first startegy. — Punit Jain, Jan 11 '19 at 18:58

score 54 · Accepted Answer · answered Jan 26 '19 at 10:09

54

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.

answered Jan 26 '19 at 10:09

1

skipWaiting is not recommended for lazy-loading: If your web app lazy-loads resources that are uniquely versioned with, e.g., hashes in their URLs, it's recommended that you avoid using skip waiting. – Mathias S Apr 12 '19 at 11:55
4

Keep in mind that the skipWaiting option is not available when the workbox plugin mode is set to InjectManifest. – saawsann May 22 '19 at 15:30
3

hmm, when adding the workboxOptions and the window.location.reload my app went into an endless loop of reloading the page :( – TexasJetter Jan 31 '20 at 16:36
1

so what is the solution in injectManifest mode? i want to automatically update my service worker on clients. @saawsann – AliReza May 05 '20 at 12:34
2

@TexasJetter did you find a workaround! It is going into endless reloading of page :( – mythicalcoder May 05 '20 at 15:19

score 5 · Answer 2 · answered Aug 24 '20 at 00:16

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.

score -1 · Answer 3 · edited Jan 12 '21 at 12:02

-1

pass registration argument then use the update() with that. the argument uses ServiceWorkerRegistration API

updated (registration) {
  console.log('New content is available; please refresh.')
  registration.update()
},

edited Jan 12 '21 at 12:02

Martin Brisiak

2,957
12
32
48

answered Jan 12 '21 at 11:40

M. Emre Yalçın

89
4

didn't work for me( Only this works well https://dev.to/drbragg/handling-service-worker-updates-in-your-vue-pwa-1pip – Dmitry Mind May 16 '21 at 16:06

Vue PWA not getting new content after refresh

3 Answers3