Reload page on updated hook (new files cached).

[frederikhors]

I'm using the default file in a cli-vue 3 new app.

What I need is to reload a page when service worker detects and updates new files.

Using your default hook I tried to use this code:

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

It works but it reloads forever!

Why?

I read a lot about Google Workbox and @vue/cli-plugin-pwa and I know these default hooks are bundled in final .js and executed on the main thread. So I think maybe I'm wrong?

I used create-react-app default service-worker.js and the reload used to work.

Where am I wrong?

[pranavjindal999]

I was experiencing the same issue and that was because for workbox, default value for skipWaiting is false now.

I added following to my vue.config.js

 pwa: {
    workboxOptions: {
      skipWaiting: true
    }
  }

But that did not fix the issue either. Now the reload doesn't work at all. In fact none of the default hooks are called.

I even tried adding clientsClaim: true to workboxOptions but no luck.

@yyx990803 if you could help ... 😄

[frederikhors]

@pranavjindal999 is there a way to debug in production all this?

[frederikhors]

@pranavjindal999 this can help? https://stackoverflow.com/questions/51214220/vue-cli-3-how-to-use-the-official-pwa-plugin-service-worker

[RedShift1]

You're supposed to call postMessage({action: 'skipWaiting'}) on the service worker but I can't figure out which variable it is bound to. Reloading won't help.

[pranavjindal999]

I was experiencing the same issue and that was because for workbox, default value for skipWaiting is false now.

I added following to my vue.config.js

 pwa: {
    workboxOptions: {
      skipWaiting: true
    }
  }

But that did not fix the issue either. Now the reload doesn't work at all. In fact none of the default hooks are called.

I even tried adding clientsClaim: true to workboxOptions but no luck.

@yyx990803 if you could help ... 😄

well somehow it worked for me automatically. I didn't change a thing.

[RedShift1]

I was experiencing the same issue and that was because for workbox, default value for skipWaiting is false now. I added following to my vue.config.js

 pwa: {
    workboxOptions: {
      skipWaiting: true
    }
  }

But that did not fix the issue either. Now the reload doesn't work at all. In fact none of the default hooks are called. I even tried adding clientsClaim: true to workboxOptions but no luck. @yyx990803 if you could help ... 😄

well somehow it worked for me automatically. I didn't change a thing.

I put this in vue.config.js (didn't have this file before):

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

and automagically this seems to be working. Why this isn't documented better, who knows...

[ulivz]

See: 《How to Fix the Refresh Button When Using Service Workers》

[UnKnoWn-Consortium]

Workbox v4.1.0 has added a default message handler for generateSW output option that allows us to invoke the skipWaiting service worker method by postMessage from the window. It is available only when skipWaiting is false (i.e. the default value). Reference.

We can leverage this with the version 4 of @vue/cli-plugin-pwa (which is, as of writing, still in its alpha). You can give it a try by npm i @vue/cli-plugin-pwa@next.

[OriginalEXE]

Indeed, as mentioned above, the alpha version of @vue/cli-plugin-pwa uses an updated workbox library which provides by default a listener that triggers the skipWaiting inside the service worker.

[shivanaru]

I was experiencing the same issue and that was because for workbox, default value for skipWaiting is false now. I added following to my vue.config.js

 pwa: {
    workboxOptions: {
      skipWaiting: true
    }
  }

But that did not fix the issue either. Now the reload doesn't work at all. In fact none of the default hooks are called. I even tried adding clientsClaim: true to workboxOptions but no luck. @yyx990803 if you could help ... 😄

well somehow it worked for me automatically. I didn't change a thing.

@pranavjindal999 - did you have to do: postMessage({action: 'skipWaiting'}) also? Or just the skipWaiting:true in the vue.config.js? Thanks!

[daneren2005]

Reading the above I wasn't sure how exactly to trigger the skip waiting event. The syntax required to trigger the skipWaiting event with the default service worker is:

registration.waiting.postMessage({
    type: 'SKIP_WAITING'
});

I also use this to hook into when the update is ready for the user's browser to refresh:

navigator.serviceWorker.addEventListener('controllerchange', () => {
    if(this.refreshing) {
        return;
    }

    this.refreshing = true;
    window.location.reload();
});

[Uysim]

Anyone have solution for this yet?

[IlyaSemenov]

@Uysim for @vue/cli-plugin-pwa this works in vue.config.js

module.exports = {
    pwa: {
        workboxOptions: {
            // https://github.com/yyx990803/register-service-worker/issues/14
            // https://stackoverflow.com/questions/54145735/vue-pwa-not-getting-new-content-after-refresh
            skipWaiting: true,
        },
    },
}

for both versions 3.x and 4.x.