Service Worker

web/package.json

@@ -16,6 +16,7 @@
     "markdown-it": "^14.0.0",
     "moment": "^2.29.4",
     "pinia": "^2.1.7",
+    "register-service-worker": "^1.7.2",
     "vue": "^3.4.8",
     "vue-router": "^4.2.5",
     "vuetify": "^3.5.4"

web/src/main.ts

@@ -8,6 +8,8 @@ import { registerPlugins } from "./plugins";
 import { Auth0Plugin } from "@auth0/auth0-vue";
 import { Router } from "vue-router";
 
+import "@/registerServiceWorker";
+
 const pinia = createPinia();
 
 import App from "./App.vue";

web/src/registerServiceWorker.ts

@@ -0,0 +1,26 @@
+import { register } from "register-service-worker";
+
+register("/serviceWorker.js", {
+  registrationOptions: { scope: "./" },
+  ready(registration) {
+    console.log("Service worker is active.");
+  },
+  registered(registration) {
+    console.log("Service worker has been registered.");
+  },
+  cached(registration) {
+    console.log("Content has been cached for offline use.");
+  },
+  updatefound(registration) {
+    console.log("New content is downloading.");
+  },
+  updated(registration) {
+    console.log("New content is available; please refresh.");
+  },
+  offline() {
+    console.log("No internet connection found. App is running in offline mode.");
+  },
+  error(error) {
+    console.error("Error during service worker registration:", error);
+  },
+});

web/src/serviceWorker.js

@@ -0,0 +1,19 @@
+/* eslint-disable no-undef, no-restricted-globals */
+
+// 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', event => {
+  console.log(event);
+  if (event.data && event.data.type === 'SKIP_WAITING') {
+    self.skipWaiting();
+  }
+});
+
+console.log("Loading serviceWorker.js")
+
+//workbox.clientsClaim();
+
+// The precaching code provided by Workbox.
+self.__precacheManifest = [].concat(self.__precacheManifest || []);
+workbox.precaching.suppressWarnings();
+workbox.precaching.precacheAndRoute(self.__precacheManifest, {});

web/tsconfig.json

@@ -18,6 +18,6 @@
       "@models": ["../api/src/data/models"]
     }
   },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "src/serviceWorker.js"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }