The api communicating with serviceWorker which can manually skip waiting is not mentioned in docs

[ItsRyanWu]

Feature request

This is a useful code snippest I found in the VuePress default theme - Layout.vue.

this.$on('sw-updated', onSWUpdated)

onSWUpdated (e) {
    this.swUpdateEvent = e
 }

There is no mention in the docs to point out that we can use the e parameter from the emit event to call skipWaiting() so that we can make a refresh button in our own custom theme for users to communicate with Service Worker to get the latest version of PWA.

I was stupid to try this to communicate with Service Worker.

function sendMessage(message) {
    return new Promise(function(resolve, reject) {
        var messageChannel = new MessageChannel();
        messageChannel.port1.onmessage = function(event) {
          if (event.data.error) {
            reject(event.data.error);
          } else {
            resolve(event.data);
          }
        };
        navigator.serviceWorker.controller.postMessage(message, [messageChannel.port2]);
    });
}

sendMessage({type:"skip-waiting"})
     .then((result)=>{console.log('[RyanBlog]: Service Worker Skip-Waiting Succeed!')})
     .catch((result)=>{console.log(`[RyanBlog]: Service Worker Skip-Waiting Failed: ${result}`)});

But even if this promise finally returns a success result, the Service Worker still cannot skip waiting until I found the code snippest in the official theme.

BTW is e.skipWaiting() stable in the future?

What problem does this feature solve?

help VuePresser easily make their own intercative skipWaiting UI in custom theme.

What does the proposed API look like?

How should this be implemented in your opinion?

just mention that parameter in the docs.

Are you willing to work on this yourself?**

Sorry but I can use it from scratch my own but haven't already make a deep understanding of it.

[ulivz]

I recommended you to read this blog: 《How to Fix the Refresh Button When Using Service Workers》 and you'll know why we don't prefer e.skipWaiting().

FYI: VuePress's solution is just similar to Approach #3