19470 - Fix service worker + version number about (#221)

* Fix the about text

* revert vite change

* Remove service workers

* Add in service worker killer

package.json

@@ -1,8 +1,10 @@
 {
   "name": "fas-ui",
-  "version": "1.2.5",
+  "version": "1.2.7",
   "private": true,
   "main": "./lib/lib.umd.min.js",
+  "appName": "FAS UI",
+  "sbcName": "SBC Common Components",
   "files": [
     "lib/lib.umd.min.js",
     "src/assets/scss/search.scss"

service-worker.js

@@ -0,0 +1,33 @@
+/* eslint-disable no-undef */
+// Kill the service worker.
+// Import Workbox from a CDN, Since this file is in the public folder and not processed by Vite
+importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.1.5/workbox-sw.js')
+
+workbox.core.setCacheNameDetails({ prefix: 'fas' })
+// Precache manifest
+self.__precacheManifest = [].concat(self.__precacheManifest || [])
+workbox.precaching.suppressWarnings && workbox.precaching.suppressWarnings()
+workbox.precaching.precacheAndRoute(self.__precacheManifest, {})
+
+// Skip waiting on install
+self.addEventListener('install', function (e) {
+  self.skipWaiting()
+})
+
+self.addEventListener('activate', function (e) {
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.getRegistrations().then(function (registrations) {
+      for (const registration of registrations) {
+        registration.unregister()
+      }
+    })
+  }
+  if ('caches' in window) {
+    caches.keys()
+      .then(function (keyList) {
+        return Promise.all(keyList.map(function(key) {
+          return caches.delete(key)
+        }))
+      })
+  }
+})

src/App.vue

@@ -31,7 +31,7 @@
       <loader-component v-show="isThereActiveCalls"></loader-component>
       <router-view v-show="!isThereActiveCalls" />
     </div>
-    <sbc-footer></sbc-footer>
+    <sbc-footer :aboutText="aboutText" />
   </v-app>
 </template>
 <script lang="ts">
@@ -47,6 +47,7 @@ import SbcLoader from 'sbc-common-components/src/components/SbcLoader.vue'
 import { useLoader, useErrorAlert } from './composables/common'
 
 import BreadCrumb from '@/components/common/BreadCrumb.vue'
+import { computed } from '@vue/composition-api'
 
 @Component({
   components: {
@@ -65,18 +66,22 @@ import BreadCrumb from '@/components/common/BreadCrumb.vue'
     /* if hasCallFailed is true, then we display the error alert component. */
     const { hasCallFailed } = useErrorAlert()
 
+    const aboutText = computed<string>(() => {
+      return import.meta.env.ABOUT_TEXT
+    })
+
     return {
       hasCallFailed,
-      isThereActiveCalls
-
+      isThereActiveCalls,
+      aboutText
     }
   }
 })
 export default class App extends Vue {
-  private showLoading = true
-  private logoutUrl = ''
+  showLoading = true
+  logoutUrl = ''
 
-  private async mounted (): Promise<void> {
+  async mounted (): Promise<void> {
     this.showLoading = false
   }
 }

src/main.ts

@@ -52,39 +52,13 @@ async function syncSession () {
   }
 }
 
-// in Vite, it need to manually include Workbox in service worker.
-function registerServiceWorker() {
-  if ('serviceWorker' in navigator && import.meta.env.NODE_ENV === 'production') {
-    navigator.serviceWorker.register(`${import.meta.env.BASE_URL}service-worker.js`)
-      .then(registration => {
-        registration.onupdatefound = () => {
-          const installingWorker = registration.installing
-          installingWorker.onstatechange = () => {
-            switch (installingWorker.state) {
-              case 'installed':
-                if (navigator.serviceWorker.controller) {
-                  console.log('New content is available; please refresh.')
-                } else {
-                  console.log('Content is cached for offline use.')
-                }
-                break
-              case 'redundant':
-                console.error('The installing service worker became redundant.')
-                break
-            }
-          };
-          console.log('New content is downloading.')
-        };
-        console.log('Service worker has been registered.')
-      })
-      .catch(error => {
-        console.error('Error during service worker registration:', error)
-      })
-  }
-
-  // Check if the app is offline
-  if (!navigator.onLine) {
-    console.log('No internet connection found. App is running in offline mode.')
+function removeServiceWorkers() {
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.getRegistrations().then(function (registrations) {
+      for (let registration of registrations) {
+        registration.unregister()
+      }
+    })
   }
 }
 // setting to window to avoid library build undefined issue for global loader
@@ -101,7 +75,6 @@ function renderVue () {
   }).$mount('#app')
   Vue.directive('can', can)
 
-  // Register the Service Worker
-  registerServiceWorker()
+  removeServiceWorkers()
 
 }

vite.config.ts

@@ -1,5 +1,7 @@
 import EnvironmentPlugin from 'vite-plugin-environment'
+import { buildSync } from 'esbuild'
 import { defineConfig } from 'vite'
+import { join } from 'node:path'
 import fs from 'fs'
 import path from 'path'
 import pluginRewriteAll from 'vite-plugin-rewrite-all'
@@ -13,12 +15,16 @@ const sbcName = JSON.parse(packageJson).sbcName
 const sbcVersion = JSON.parse(packageJson).dependencies['sbc-common-components']
 const aboutText1 = (appName && appVersion) ? `${appName} v${appVersion}` : ''
 const aboutText2 = (sbcName && sbcVersion) ? `${sbcName} v${sbcVersion}` : ''
-
 const generateAboutText = (aboutText1, aboutText2) => {
-  return (aboutText1 && aboutText2) ? `"${aboutText1}<br>${aboutText2}"`
-    : aboutText1 ? `"${aboutText1}"`
-      : aboutText2 ? `"${aboutText2}"`
-        : '""' // Ensure a string is always returned
+  if (aboutText1 && aboutText2) {
+    return `"${aboutText1}<br>${aboutText2}"`
+  } else if (aboutText1) {
+    return `"${aboutText1}"`
+  } else if (aboutText2) {
+    return `"${aboutText2}"`
+  } else {
+    return ''
+  }
 }
 
 export default defineConfig(({ mode }) => {
@@ -28,7 +34,6 @@ export default defineConfig(({ mode }) => {
       'import.meta.env.ABOUT_TEXT': generateAboutText(aboutText1, aboutText2)
     },
     envPrefix: 'VUE_APP_', // Need to remove this after fixing vaults. Use import.meta.env with VUE_APP.
-
     build: {
       sourcemap: true,
       lib: isLibBuild ? {
@@ -79,7 +84,19 @@ export default defineConfig(({ mode }) => {
         BUILD: 'web' // Fix for Vuelidate, allows process.env with Vite.
       }),
       postcssNesting,
-      pluginRewriteAll()
+      pluginRewriteAll(),
+      {
+        apply: 'build',
+        enforce: 'post',
+        transformIndexHtml () {
+          buildSync({
+            minify: true,
+            bundle: true,
+            entryPoints: [join(process.cwd(), 'service-worker.js')],
+            outfile: join(process.cwd(), 'lib', 'service-worker.js')
+          })
+        }
+      }
     ],
     resolve: {
       alias: {