Feature(sw): add service worker update popup support

Author: Armour

package.json

@@ -14,7 +14,7 @@
     "test:unit": "jest --clearCache && vue-cli-service test:unit"
   },
   "dependencies": {
-    "@tinymce/tinymce-vue": "^2.0.0",
+    "@tinymce/tinymce-vue": "^2.1.0",
     "axios": "^0.19.0",
     "clipboard": "^2.0.4",
     "codemirror": "^5.47.0",
@@ -37,7 +37,7 @@
     "script-loader": "^0.7.2",
     "sortablejs": "^1.9.0",
     "tinymce": "^5.0.7",
-    "tui-editor": "^1.4.1",
+    "tui-editor": "^1.4.2",
     "vue": "^2.6.10",
     "vue-class-component": "^7.1.0",
     "vue-count-to": "^1.0.13",
@@ -70,7 +70,6 @@
     "@types/sortablejs": "^1.7.2",
     "@types/tinymce": "^4.5.22",
     "@types/webpack-env": "^1.13.9",
-    "@types/xlsx": "^0.0.36",
     "@types/yamljs": "^0.2.30",
     "@vue/cli-plugin-babel": "^3.8.0",
     "@vue/cli-plugin-e2e-cypress": "^3.8.0",
@@ -89,14 +88,14 @@
     "eslint-plugin-vue": "^5.2.2",
     "fibers": "^4.0.1",
     "jest": "^24.8.0",
-    "lint-staged": "^8.1.7",
-    "sass": "^1.20.3",
+    "lint-staged": "^8.2.0",
+    "sass": "^1.21.0",
     "sass-loader": "^7.1.0",
     "style-resources-loader": "^1.2.1",
     "swagger-routes-express": "^3.0.1",
     "ts-jest": "^24.0.2",
     "ts-node-dev": "^1.0.0-pre.39",
-    "typescript": "3.4.5",
+    "typescript": "3.5.1",
     "vue-cli-plugin-element": "^1.0.1",
     "vue-cli-plugin-style-resources-loader": "^0.1.3",
     "vue-template-compiler": "^2.6.10",

src/App.vue

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

src/main.ts

@@ -13,7 +13,7 @@ import i18n from '@/lang' // Internationalization
 import '@/icons/components'
 import '@/permission'
 import '@/utils/error-log'
-import '@/registerServiceWorker'
+import '@/pwa/register-service-worker'
 import * as filters from '@/filters'
 
 Vue.use(ElementUI, {

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/registerServiceWorker.ts renamed to src/pwa/register-service-worker.ts

@@ -10,17 +10,27 @@ if (process.env.NODE_ENV === 'production') {
         'For more details, visit https://goo.gl/AFskqB'
       )
     },
-    registered() {
+    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() {
+    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.')

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, {})

vue.config.js

@@ -32,14 +32,18 @@ module.exports = {
     }
   },
   pwa: {
-    name: name
+    name: name,
+    workboxPluginMode: 'InjectManifest',
+    workboxOptions: {
+      swSrc: path.resolve(__dirname, 'src/pwa/service-worker.js')
+    }
   },
   pluginOptions: {
     'style-resources-loader': {
       preProcessor: 'scss',
       patterns: [
-        path.resolve(__dirname, './src/styles/_variables.scss'),
-        path.resolve(__dirname, './src/styles/_mixins.scss')
+        path.resolve(__dirname, 'src/styles/_variables.scss'),
+        path.resolve(__dirname, 'src/styles/_mixins.scss')
       ]
     }
   },
@@ -74,7 +78,7 @@ module.exports = {
                 },
                 commons: {
                   name: 'chunk-commons',
-                  test: path.join(__dirname, 'src/components'),
+                  test: path.resolve(__dirname, 'src/components'),
                   minChunks: 3, //  minimum common number
                   priority: 5,
                   reuseExistingChunk: true