Implemented auto update not yet tested

ayanova/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ayanova",
-  "version": "8.0.0-alpha.23",
+  "version": "8.0.0-alpha.24",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

ayanova/src/App.vue

@@ -10,6 +10,11 @@
     https://github.com/vuetifyjs/vuetify/issues/9607
      
     -->
+    <template>
+      <button v-if="updateExists" @click="refreshApp">
+        New version available! Click to update
+      </button>
+    </template>
     <v-navigation-drawer
       v-if="isAuthenticated"
       v-model="drawer"
@@ -269,24 +274,37 @@ export default {
         title: "",
         helpUrl: "user-intro",
         menuItems: []
-      }
+      },
+      //pwa update
+      //https://medium.com/@dougallrich/give-users-control-over-app-updates-in-vue-cli-3-pwas-20453aedc1f2
+      refreshing: false,
+      registration: null,
+      updateExists: false
     };
   },
   created() {
-    //Detect version change, wipe persisted form settings if has changed.
-    let currentVersion = window.$gz.clientInfo.version;
-    if (currentVersion != window.$gz.store.state.lastClientVersion) {
-      window.$gz.store.commit(
-        "logItem",
-        "##### New version detected ##### cleared form settings cache (" +
-          window.$gz.store.state.lastClientVersion +
-          " -> " +
-          currentVersion +
-          ")"
-      );
-      window.$gz.store.commit("setLastClientVersion", currentVersion);
-      window.$gz.store.commit("clearAllFormSettings");
-    }
+    //pwa update
+    document.addEventListener("swUpdated", this.showRefreshUI, { once: true });
+    navigator.serviceWorker.addEventListener("controllerchange", () => {
+      if (this.refreshing) return;
+      this.refreshing = true;
+      window.location.reload();
+    });
+
+    // //Detect version change, wipe persisted form settings if has changed.
+    // let currentVersion = window.$gz.clientInfo.version;
+    // if (currentVersion != window.$gz.store.state.lastClientVersion) {
+    //   window.$gz.store.commit(
+    //     "logItem",
+    //     "##### New version detected ##### cleared form settings cache (" +
+    //       window.$gz.store.state.lastClientVersion +
+    //       " -> " +
+    //       currentVersion +
+    //       ")"
+    //   );
+    //   window.$gz.store.commit("setLastClientVersion", currentVersion);
+    //   window.$gz.store.commit("clearAllFormSettings");
+    // }
 
     //////////////////////////////////
     // WIRE UP
@@ -378,6 +396,20 @@ export default {
     },
     newNotificationCount() {
       return this.$store.state.newNotificationCount;
+    },
+    //PWA update
+    showRefreshUI(e) {
+      this.registration = e.detail;
+      this.updateExists = true;
+    },
+    refreshApp() {
+      this.updateExists = false;
+      if (!this.registration || !this.registration.waiting) {
+        return;
+      }
+      this.registration.waiting.postMessage("skipWaiting");
+      //todo clear stale data here?
+      //maybe needs better control, i.e. conditionally clear only if needs to and then force re-login after
     }
   }
 };

ayanova/src/api/ayanova-version.js

@@ -1,4 +1,4 @@
 export default {
-  version: "8.0.0-alpha.23",
+  version: "8.0.0-alpha.24",
   copyright: "© 1999-2020, Ground Zero Tech-Works Inc."
 };

ayanova/src/registerServiceWorker.js

@@ -5,16 +5,27 @@ 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"
-      );
+      console.log("Service worker is active.");
     },
     cached() {
       console.log("Content has been cached for offline use.");
     },
-    updated() {
+    updatefound() {
+      console.log("New content is downloading.");
+    },
+    updated(registration) {
       console.log("New content is available; please refresh.");
+      //https://medium.com/@dougallrich/give-users-control-over-app-updates-in-vue-cli-3-pwas-20453aedc1f2
+      document.dispatchEvent(
+        new CustomEvent("swUpdated", { detail: registration })
+      );
+    },
+    registered(registration) {
+      //https://medium.com/@dougallrich/give-users-control-over-app-updates-in-vue-cli-3-pwas-20453aedc1f2
+      console.log("Service worker has been registered.");
+      setInterval(() => {
+        registration.update();
+      }, 1000 * 60 * 60); // e.g. hourly checks
     },
     offline() {
       console.log(

ayanova/src/sw.js

@@ -0,0 +1,25 @@
+// 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.
+//https://medium.com/@dougallrich/give-users-control-over-app-updates-in-vue-cli-3-pwas-20453aedc1f2
+self.addEventListener("message", e => {
+  if (!e.data) {
+    return;
+  }
+
+  switch (e.data) {
+    case "skipWaiting":
+      self.skipWaiting();
+      break;
+    default:
+      // NOOP
+      break;
+  }
+});
+
+workbox.core.clientsClaim(); // Vue CLI 4 and Workbox v4, else
+// workbox.clientsClaim(); // Vue CLI 3 and Workbox v3.
+
+// The precaching code provided by Workbox.
+self.__precacheManifest = [].concat(self.__precacheManifest || []);
+// workbox.precaching.suppressWarnings(); // Only used with Vue CLI 3 and Workbox v3.
+workbox.precaching.precacheAndRoute(self.__precacheManifest, {});

ayanova/vue.config.js

@@ -16,6 +16,12 @@ module.exports = {
       })
     ]
   },
-
-  transpileDependencies: ["vuetify"]
+  transpileDependencies: ["vuetify"],
+  pwa: {
+    workboxPluginMode: "InjectManifest",
+    workboxOptions: {
+      swSrc: "./src/sw.js",
+      swDest: "service-worker.js"
+    }
+  }
 };