feat: e.skipWaiting() in sw-update event

[mysticatea]

Refs #453.

This PR adds the e.skipWaiting() method into the sw-update event in order to make that custom themes can implement reload buttons on the sw-update event.

Background:

I'm considering to use Vuepress to make the documentation of my OSSs. I will write the links to the documentation from changelogs. In the situation, Vuepress (with service workers) has a critical problem.

1. Browsers show the documentation from service worker caches when people open the documentation from the link in changelogs. It's old.
2. Reload doesn't work until all clients of the old service worker are closed.

So people have to open the documentation and close it and open it again in order to see the latest documentation. It's inconvenient.

Now Vuepress provides the sw-update event. It's the best timing to show "refresh" button to visitors in order to reload contents. However, new service worker doesn't available until they close all clients of the old service worker. Browsers will load contents from the old service worker even if it calls location.reload(true). So I couldn't implement "refresh" button.

Details:

This PR adds the e.skipWaiting() method into the sw-update event to resolve that problem. The e.skipWaiting() method activates new service worker immediately. So we can reload contents after the e.skipWaiting() method is called.

For example, eslint-utils:/docs/.vuepress/theme/Layout.vue is an implementation of "refresh" button. If people clicked the "refresh" button, it calls the e.skipWaiting() method to available the new service worker then calls location.reload(true).

Notes:

• This PR didn't implement the "refresh" button into the default theme because I don't have good idea about the way to configure the popup with internationalization.
• I'm not familiar with workbox. The generateSW method doesn't look to have the option which appends additional code. So I modified build.js to append a code to service-worker.js after workbox generated it. I'm not sure if this is good.

[EYHN]

Thanks for helping!

but sudden page refresh may interrupt readers' reading.
We may need a alert window.

[mysticatea]

This PR adds the API to implement refresh UI.

[EYHN]

Can we use the importScripts option instead?

https://developers.google.com/web/tools/workbox/modules/workbox-build#full_generatesw_config

[mysticatea]

Thank you for the suggestion.

I compared it and the current code, I didn't feel that the option improves the build steps much. We need the following steps with the option:

1. Copy the service-worker/*.js files to outDir manually. (Webpack doesn't handle the files for service worker because Workbox requires the files Webpack generated.)
2. Give the path to service-worker/*.js files to the importScripts option.

Step 1 is the same step as the current appending step essentially. Plus, there are some concerns:

1. the importScripts option makes extra HTTPS requests.
2. Chrome has a bug that overlooks the changes of imported scripts (chromium#648295). This implies the change of the service-worker/*.js files will not trigger to update service worker's caches.

[mysticatea]

I updated this PR for [email protected] which probides service worker registration as a parameter.

[ulivz]

Thanks for the great work again, let's leverage #533 !