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

Author: mysticatea

Diff for: lib/app/SWUpdateEvent.js

@@ -0,0 +1,35 @@
+export default class SWUpdateEvent {
+  constructor (registration) {
+    Object.defineProperty(this, 'registration', {
+      value: registration,
+      configurable: true,
+      writable: true
+    })
+  }
+
+  /**
+   * Activate new service worker to work 'location.reload()' with new data.
+   */
+  skipWaiting () {
+    const worker = this.registration.waiting
+    if (!worker) {
+      return Promise.resolve()
+    }
+
+    console.log('[vuepress:sw] Doing worker.skipWaiting().')
+    return new Promise((resolve, reject) => {
+      const channel = new MessageChannel()
+
+      channel.port1.onmessage = (event) => {
+        console.log('[vuepress:sw] Done worker.skipWaiting().')
+        if (event.data.error) {
+          reject(event.data.error)
+        } else {
+          resolve(event.data)
+        }
+      }
+
+      worker.postMessage({ type: 'skip-waiting' }, [channel.port2])
+    })
+  }
+}

Diff for: lib/app/clientEntry.js

@@ -1,6 +1,7 @@
 /* global BASE_URL, GA_ID, ga, SW_ENABLED */
 
 import { createApp } from './app'
+import SWUpdateEvent from './SWUpdateEvent'
 import { register } from 'register-service-worker'
 
 const { app, router } = createApp()
@@ -47,7 +48,10 @@ router.onReady(() => {
       },
       updated () {
         console.log('[vuepress:sw] Content updated.')
-        app.$refs.layout.$emit('sw-updated')
+
+        navigator.serviceWorker.getRegistration().then(registration => {
+          app.$refs.layout.$emit('sw-updated', new SWUpdateEvent(registration))
+        })
       },
       offline () {
         console.log('[vuepress:sw] No internet connection found. App is running in offline mode.')

Diff for: lib/build.js

@@ -81,11 +81,16 @@ module.exports = async function build (sourceDir, cliOptions = {}) {
   if (options.siteConfig.serviceWorker) {
     logger.wait('\nGenerating service worker...')
     const wbb = require('workbox-build')
-    wbb.generateSW({
+    await wbb.generateSW({
       swDest: path.resolve(outDir, 'service-worker.js'),
       globDirectory: outDir,
       globPatterns: ['**\/*.{js,css,html,png,jpg,jpeg,gif,svg,woff,woff2,eot,ttf,otf}']
     })
+    await fs.writeFile(
+      path.resolve(outDir, 'service-worker.js'),
+      await fs.readFile(path.resolve(__dirname, 'service-worker/skip-waiting.js'), 'utf8'),
+      { flag: 'a' }
+    )
   }
 
   // DONE.

Diff for: lib/service-worker/skip-waiting.js

@@ -0,0 +1,12 @@
+addEventListener('message', event => {
+  const replyPort = event.ports[0]
+  const message = event.data
+  if (replyPort && message && message.type === 'skip-waiting') {
+    event.waitUntil(
+      self.skipWaiting().then(
+        () => replyPort.postMessage({ error: null }),
+        error => replyPort.postMessage({ error })
+      )
+    )
+  }
+})