fix: Add provide('swHasUpgrade', hasUpgrade) and prevent automatic up…

…grade and reload of service worker

app.vue

@@ -216,12 +216,29 @@ useHead({
       return bodyClass.join(' ')
     }),
   },
-  script: [
-    {
-      innerHTML: `if('serviceWorker' in navigator){window.addEventListener('load', () => {navigator.serviceWorker.register('/sw.js', { scope: '/' })})}`,
-    },
-  ],
 })
+const hasUpgrade = ref<boolean>(false)
+if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('/sw.js').then(registration => {
+    // Listen for updates
+    registration.addEventListener('updatefound', () => {
+      const newWorker = registration.installing
+      if (newWorker) {
+        newWorker.addEventListener('statechange', () => {
+          if (newWorker.state === 'activated') {
+            // Notify the user that an update is available
+            console.log('A new version is available. Please refresh.')
+            hasUpgrade.value = true
+            // Optionally, prompt the user for a refresh, or defer it to a better time.
+          }
+        })
+      }
+    })
+  })
+}
+// Make the service worker update available to the rest of the app
+// any view can use
+provide('swHasUpgrade', hasUpgrade)
 </script>
 
 <template>

service-worker/sw.ts

@@ -1,5 +1,4 @@
 import { keccak256 } from 'js-sha3'
-import { clientsClaim } from 'workbox-core'
 /// <reference lib="WebWorker" />
 /// <reference types="vite/client" />
 import { cleanupOutdatedCaches, precacheAndRoute } from 'workbox-precaching'
@@ -57,6 +56,12 @@ registerRoute(
 )
 // registerRoute(new NavigationRoute(createHandlerBoundToURL('/'), { allowlist }))
 
-// @ts-ignore
-self.skipWaiting()
-clientsClaim()
+self.addEventListener('install', () => {
+  self.skipWaiting() // Skip waiting to activate the new SW immediately
+})
+
+self.addEventListener('activate', event => {
+  event.waitUntil(
+    self.clients.claim() // Ensure the SW controls the clients
+  )
+})

tsconfig.json

@@ -2,6 +2,7 @@
   // https://nuxt.com/docs/guide/concepts/typescript
   "extends": "./.nuxt/tsconfig.json",
   "compilerOptions": {
+    "lib": ["webworker", "dom", "esnext"],
     "paths": {
       "@/*": [
         "./*"