feat(pwa): 增加 pwa 服务弹框功能

Author: cklwblove

src/App.vue

@@ -1,14 +1,21 @@
 <template>
   <div id="app">
     <router-view />
+    <service-worker-update-popup />
   </div>
 </template>
 
 <script lang="ts">
-  import {Vue, Component} from 'vue-property-decorator';
+import {Vue, Component} from 'vue-property-decorator';
+import ServiceWorkerUpdatePopup from '@/pwa/components/ServiceWorkerUpdatePopup.vue';
 
-  @Component
-  export default class App extends Vue {}
+@Component({
+  name: 'App',
+  components: {
+    ServiceWorkerUpdatePopup
+  }
+})
+export default class App extends Vue {}
 </script>
 
 <style lang="less">

src/main.ts

@@ -13,7 +13,7 @@ import './router/router.interceptor';
 import './filters';
 import './directives';
 import './services';
-import './registerServiceWorker';
+import './pwa/register-service-worker';
 // mock
 import { mockXHR } from '../mock';
 

src/pwa/components/ServiceWorkerUpdatePopup.vue

@@ -0,0 +1,67 @@
+<script lang="ts">
+  import { Component, Vue } from 'vue-property-decorator';
+
+  @Component({
+    name: 'ServiceWorkerUpdatePopup'
+  })
+  export default class extends Vue {
+    private refreshing = false;
+    private notificationText = 'New content is available!';
+    private refreshButtonText = 'Refresh';
+    private registration: ServiceWorkerRegistration | null = null;
+
+    created() {
+      // Listen for swUpdated event and display refresh notification as required.
+      document.addEventListener('swUpdated', this.showRefreshUI, {once: true});
+      // Refresh all open app tabs when a new service worker is installed.
+      navigator.serviceWorker.addEventListener('controllerchange', () => {
+        if (this.refreshing) return;
+        this.refreshing = true;
+        window.location.reload();
+      });
+    }
+
+    render() {
+      // Avoid warning for missing template
+    }
+
+    private showRefreshUI(e: Event) {
+      // Display a notification inviting the user to refresh/reload the app due
+      // to an app update being available.
+      // The new service worker is installed, but not yet active.
+      // Store the ServiceWorkerRegistration instance for later use.
+      const h = this.$createElement;
+      this.registration = (e as CustomEvent).detail;
+      this.$notify.info({
+        title: 'Update available',
+        message: h('div', {class: 'sw-update-popup'}, [
+          this.notificationText,
+          h('br'),
+          h('button', {
+            on: {
+              click: (e: Event) => {
+                e.preventDefault();
+                this.refreshApp();
+              }
+            }
+          }, this.refreshButtonText)
+        ]),
+        position: 'bottom-right',
+        duration: 0
+      });
+    }
+
+    private refreshApp() {
+      // Protect against missing registration.waiting.
+      if (!this.registration || !this.registration.waiting) return;
+      this.registration.waiting.postMessage('skipWaiting');
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .sw-update-popup > button {
+    margin-top: 0.5em;
+    padding: 0.25em 1.5em;
+  }
+</style>

src/pwa/register-service-worker.ts

@@ -0,0 +1,42 @@
+/* eslint-disable no-console */
+
+import { register } from 'register-service-worker';
+
+if (process.env.NODE_ENV === 'production') {
+  register(`${process.env.BASE_URL}service-worker.js`, {
+    ready() {
+      console.log(
+        'App is being served from cache by a service worker.\n' +
+        'For more details, visit https://goo.gl/AFskqB'
+      );
+    },
+    registered(registration) {
+      console.log('Service worker has been registered.');
+      // Routinely check for app updates by testing for a new service worker.
+      setInterval(() => {
+        registration.update();
+      }, 1000 * 60 * 60); // hourly checks
+    },
+    cached() {
+      console.log('Content has been cached for offline use.');
+    },
+    updatefound() {
+      console.log('New content is downloading.');
+    },
+    updated(registration) {
+      console.log('New content is available; please refresh.');
+      // Add a custom event and dispatch it.
+      // Used to display of a 'refresh' banner following a service worker update.
+      // Set the event payload to the service worker registration object.
+      document.dispatchEvent(
+        new CustomEvent('swUpdated', {detail: registration})
+      );
+    },
+    offline() {
+      console.log('No internet connection found. App is running in offline mode.');
+    },
+    error(error) {
+      console.error('Error during service worker registration:', error);
+    }
+  });
+}

src/pwa/service-worker.js

@@ -0,0 +1,16 @@
+// This is the code piece that GenerateSW mode can't provide for us.
+// This code listens for the user's confirmation to update the app.
+self.addEventListener('message', (e) => {
+  if (e.data) {
+    if (e.data === 'skipWaiting') {
+      self.skipWaiting();
+    }
+  }
+});
+
+workbox.clientsClaim();
+
+// The precaching code provided by Workbox. You don't need to change this part.
+self.__precacheManifest = [].concat(self.__precacheManifest || []);
+workbox.precaching.suppressWarnings();
+workbox.precaching.precacheAndRoute(self.__precacheManifest, {});