Fix issues with manual update. Add readme that gets copied to installing app

Author: Karen Baney

generator/template/src/composables/use-service-worker.js

@@ -2,7 +2,7 @@
 import { ref } from 'vue'
 
 export const useServiceWorker = (forceUpdate = false) => {
-  let registration = null
+  let wb = null
   const updateExists = ref(false)
   const refreshing = ref(false)
 
@@ -13,26 +13,27 @@ export const useServiceWorker = (forceUpdate = false) => {
     }
 
     refreshing.value = true
+    updateExists.value = false
     window.location.reload()
   }
 
   const refreshApp = () => {
     console.log('useServiceWorker: refreshApp called.')
-    updateExists.value = false
-    if (registration) {
-      const swState = registration.waiting.state
-      if (swState === 'waiting' || swState === 'installed') {
-        navigator.serviceWorker.controller.postMessage({ type: 'SKIP_WAITING' })
-        console.log('useServiceWorker: Posted SKIP_WAITING message.')
-      }
-    }
+    wb.addEventListener('controlling', (event) => {
+      reloadApp()
+    })
+
+    wb.messageSkipWaiting()
   }
 
   const updateAvailable = (event) => {
     console.log('useServiceWorker: Service worker update available.')
     if (event && event.detail) {
-      registration = event.detail
+      wb = event.detail
       updateExists.value = true
+
+      // forceUpdate is used by the app-auto-update component to force the app to activate.
+      // Recommend only using this on the initial landing page or login page of an application.
       if (forceUpdate) {
         console.log('useServiceWorker: Forcing service worker update.')
         refreshApp()
@@ -43,13 +44,6 @@ export const useServiceWorker = (forceUpdate = false) => {
   // listen for service worker updates.
   document.addEventListener('swUpdated', updateAvailable, { once: true })
 
-  if (navigator.serviceWorker) {
-    navigator.serviceWorker.addEventListener('controllerchange', () => {
-      console.log('useServiceWorker: controllerchange called')
-      reloadApp()
-    })
-  }
-
   return {
     refreshApp,
     updateExists

generator/template/src/service-worker/README.md

@@ -0,0 +1,28 @@
+# Setup
+After installing vue-cli-plugin-workbox-pwa, you can complete wiring up the Auto Update and Manual Update features.
+
+## Auto Update
+The auto update uses:
+1. /components/app-auto-update.vue
+2. /composables/use-service-worker.js
+3. /service-worker/register-service-worker.js
+
+We recommend only adding the Auto Update to a Login Page or Landing Page. Keep in mind that it automatically activates
+the service worker and reloads the page, so if it is added to a page that disrupts the user's work (like a form) it could
+cause an annoying user experience.
+
+To use the Auto Update, follow the example /service-worker/auto-update-example.
+
+Note: The auto update only works with the InjectManifest option.
+
+## Manual Update
+The manual update uses:
+1. /components/app-manual-update.vue
+2. /composables/use-service-worker.js
+3. /service-worker/register-service-worker.js
+
+The Manual Update can be added to the App.vue. See the example in /service-worker/manual-update-example. This feature prompts
+the user with a banner and an update button whenever there is a new version of the service worker available. This allows
+the user to be in control of when the update happens, so it doesn't interrupt their work.
+
+Note: The manual update only works with the InjectManifest option.

generator/template/src/service-worker/auto-update-example.vue

@@ -3,10 +3,10 @@ import AppAutoUpdate from '@/components/app-auto-update.vue'
 
 export default {
   // To auto update your PWA when a new service worker is available, just drop in the AppAutoUpdate component
-  // The ideal use case for this would be on a login page, if your application has one.
+  // The ideal use case for this would be on a landing page or a login page, if your application has one.
   // Some things to note:
   // 1. You really only want to auto update when you are sure there will be no adverse affects to your application, like on a login page.
-  // 2. If you are making your website PWA accessible, then it's probably safe to add this to App.vue or your home page.
+  // 2. If you are making your website PWA accessible, then it's probably safe to add this to your home page.
   // 3. If you are using advanced features of a PWA, like API caching, offline capabilities, etc. You may not want to use the auto update. Instead,
   // use the manual update, which gives the user control.
   name: 'auto-update-example',

generator/template/src/service-worker/register-service-worker.js

@@ -5,6 +5,8 @@
  */
  import { Workbox } from 'workbox-window'
 
+ // Checks for updates every hour. When an update is found, the app-auto-update component and use-service-worker composable
+ // handles the actual updating.
  const autoUpdate = async (registration) => {
    const updateInterval = 1000 * 60 * 60 // 1 hour
    // const updateInterval = 1000 * 60 // 1 min // for debugging
@@ -19,11 +21,13 @@
    }, updateInterval)
  }
 
- const manualUpdateAvailable = (registration) => {
+ // Emits an event that the use-service-worker composable is listens to. Then the app-manual-update is controlled by
+ // a property on the composable and prompts the user to update.
+ const manualUpdateAvailable = (wb) => {
    // Wires up an event that we can listen to in the app. Example: listen for available update and prompt user to update.
    console.log('sw: manualUpdateAvailable dispatching event')
    document.dispatchEvent(
-     new CustomEvent('swUpdated', { detail: registration }))
+     new CustomEvent('swUpdated', { detail: wb }))
  }
 
  const register = async () => {
@@ -43,7 +47,6 @@
        console.log('sw: activated event listener hit.')
        if (event.isUpdate) {
          // event.isUpdate=true means the service worker was already registered and there is a new version available.
-         // this only triggers self.skipWaiting. It still doesn't force the app to update. See /composables/use-service-worker.ts for updating app.
          wb.messageSkipWaiting()
        } else {
          // first time use when event.isUpdate = false
@@ -60,9 +63,7 @@
      wb.addEventListener('waiting', (event) => {
        console.log('sw: waiting event listener hit.')
        if (event.isUpdate) {
-         // Wires up event that is listened to in the use-service-worker composable. The app-manual-update component then
-         // prompts the user there is an update available to activate.
-         manualUpdateAvailable(registration)
+         manualUpdateAvailable(wb)
        }
      })
 
@@ -72,7 +73,6 @@
 
      wb.addEventListener('fetch', (event) => {
        console.log('sw: fetch event listener hit.')
-       // wb.messageSkipWaiting() // hack to "unfreeze" stuck service worker
      })
    }
  }

generator/template/src/sw.js

@@ -60,8 +60,10 @@ registerRoute(
 
 self.addEventListener('message', (event) => {
   console.log('sw root: message event listener hit.')
-  if (event.data && event.data.type === 'SKIP_WAITING') {
-    self.skipWaiting()
-    console.log('sw root: message SKIP_WAITING called.')
+  switch (event.data && event.data.type) {
+    case 'SKIP_WAITING':
+      self.skipWaiting()
+      console.log('sw root: message SKIP_WAITING called.')
+      break
   }
 })