update caching. move skipwaiting to sw.js

Author: Karen Baney

generator/template/src/components/app-manual-update.vue

@@ -17,7 +17,7 @@ export default {
 <template>
   <div
     style="background-color: #FFFF99;"
-    v-if="updateExists"
+    v-show="updateExists"
   >
     Update available
     <button @click="refreshApp">

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

@@ -6,8 +6,8 @@
  import { Workbox } from 'workbox-window'
 
  const autoUpdate = async (registration) => {
-   // const updateInterval = 1000 * 60 * 60 // 1 hour
-   const updateInterval = 100 * 60 * 60 // 1 min // for debugging
+   const updateInterval = 1000 * 60 * 60 // 1 hour
+   // const updateInterval = 1000 * 60 // 1 min // for debugging
    setInterval(async () => {
      try {
        /* eslint-disable-next-line no-unused-expressions */
@@ -21,6 +21,7 @@
 
  const manualUpdateAvailable = (registration) => {
    // 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 }))
  }
@@ -39,36 +40,11 @@
      autoUpdate(registration)
 
      wb.addEventListener('activated', async (event) => {
-       // if (event.isUpdate) {
+       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
-       //   // service worker should claim the client immediately since its the first install.
-       //   wb.messageSW({ type: 'CLIENTS_CLAIM' })
-       //   console.log('sw: clientsClaim called.')
-       // }
-     })
-
-     // This code listens for the user's confirmation to update the app.
-     wb.addEventListener('message', (event) => {
-       console.log('sw: message event listener hit.')
-       if (event.data && event.data.type === 'SKIP_WAITING') {
          wb.messageSkipWaiting()
-         console.log('sw: message SKIP_WAITING called.')
-       }
-     })
-
-     wb.addEventListener('installed', (event) => {
-       console.log('sw: installed 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)
-         wb.messageSkipWaiting()
-         console.log('sw: installed new version.')
        } else {
          // first time use when event.isUpdate = false
          // service worker should claim the client immediately since its the first install.
@@ -77,6 +53,10 @@
        }
      })
 
+     wb.addEventListener('installed', (event) => {
+       console.log('sw: installed event listener hit.')
+     })
+
      wb.addEventListener('waiting', (event) => {
        console.log('sw: waiting event listener hit.')
        if (event.isUpdate) {

generator/template/src/sw.js

@@ -17,13 +17,12 @@ registerRoute(
   })
 )
 
-// Cache CSS, JS, and Web Worker requests with a Stale While Revalidate strategy
+// Cache CSS and JS requests with a Stale While Revalidate strategy
 registerRoute(
   // Check to see if the request's destination is style for stylesheets, script for JavaScript, or worker for web worker
   ({ request }) =>
     request.destination === 'style' ||
-    request.destination === 'script' ||
-    request.destination === 'worker',
+    request.destination === 'script',
   // Use a Stale While Revalidate caching strategy
   new StaleWhileRevalidate({
     // Put all cached files in a cache named 'assets'
@@ -58,3 +57,11 @@ 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.')
+  }
+})