Add message event listener when skipWaiting: false

What problem does this feature solve?

When developing PWA, the default workboxPluginMode is generateSW, and they set skipWaiting: false. In this case, the generated service worker should allow our web app to trigger skipWaiting() on demand, by using postMessage() to communicate with our service worker.

This feature was implemented in Workbox v4.1.0, but Vue CLI 3.x can’t take advantage of it.

What does the proposed API look like?

self.addEventListener('message', (event) => {
  if (event.data && event.data.type === 'SKIP_WAITING') {
    self.skipWaiting();
  }
});

Reference: skipWaiting option in workbox-webpack-plugin

[wizardpisces]

@LinusBorg @loliconer @wizardpisces

I am now using the v4 alpha which comes with Workbox 4

I have tried adding this navigator.serviceWorker.controller.postMessage({ type: 'SKIP_WAITING'}); inside the updated() hook inside register-service-worker.js

But this gives me the following error:

Error during service worker registration: TypeError: Cannot read property 'postMessage' of null

I have also tried adding

updated(reg) {
    window.addEventListener('refreshSW', function () {
      reg.waiting.postMessage({ type: 'SKIP_WAITING' })
    })
}
`
``

but this does nothing

I would really really like to know how to immediately clear the cache when new content is detected. I am so boggled that this is so damn hard to accomplish and how is this not affecting thousands of vue-cli developers? Everytime I push a new breaking change it seems like all my users run into issues with the cache not being cleared

this article might help you

[loliconer]

@LinusBorg Yes, I can send a message to the SW, my code in registerServiceWorker.js:

    updated (reg) {
      console.log('New content is available; please refresh.')
      window.addEventListener('refreshSW', function () {
        reg.waiting.postMessage({ type: 'SKIP_WAITING' })
      })
    },

The problem is the ServiceWorker can’t skip waiting after posting message, because it hasn’t a listener to listen the message event. So the code:

self.addEventListener('message', (event) => {
  if (event.data && event.data.type === 'SKIP_WAITING') {
    self.skipWaiting();
  }
});

should be included in the service-worker.js, which is auto-generated. But now the code doesn’t exist in service-worker.js.