feat: Add swHasUpgrade but prevent auto reload. (#517)

app.vue

@@ -23,6 +23,11 @@ const { cacheValue } = useCache()
 const { currencyList } = storeToRefs(useCurrencyStore())
 const { initProvider, reconnect } = useWalletConnectProvider()
 const { formatMessage } = useIntl()
+const swHasUpgrade = ref<boolean>(false)
+
+// Make the service worker update available to the rest of the app
+// any view can use inject('swHasUpgrade') to access this value
+provide('swHasUpgrade', swHasUpgrade)
 
 const setupTranslations = () => {
   useIntl().setupIntl(defaultConfig)
@@ -216,12 +221,22 @@ useHead({
       return bodyClass.join(' ')
     }),
   },
-  script: [
-    {
-      innerHTML: `if('serviceWorker' in navigator){window.addEventListener('load', () => {navigator.serviceWorker.register('/sw.js', { scope: '/' })})}`,
-    },
-  ],
 })
+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') {
+            swHasUpgrade.value = true
+          }
+        })
+      }
+    })
+  })
+}
 </script>
 
 <template>

nuxt.config.ts

@@ -21,6 +21,28 @@ export default defineNuxtConfig({
   app: {
     head: siteMeta,
   },
+  components: {
+    dirs: [
+      // Use this to find all the dirs `find . -name "*.vue" -exec dirname {} \; | sort -u`
+      { path: '~/components', sourcemap: true }, // Enable source map generation for components
+      {
+        path: '~/node_modules/vue-instantsearch/src/components',
+        sourcemap: true,
+      },
+      {
+        path: '~/domains/rpc/components',
+        sourcemap: true,
+      },
+      {
+        path: '~/domains/graph/components',
+        sourcemap: true,
+      },
+      {
+        path: '~/layouts',
+        sourcemap: true,
+      },
+    ],
+  },
   typescript: {
     strict: true,
   },
@@ -65,26 +87,46 @@ export default defineNuxtConfig({
         nodePolyfills({
           include: ['node_modules/**/*.js', /node_modules\/.vite\/.*js/],
         }),
-      sentryVitePlugin({
-        authToken: process.env.NUXT_PUBLIC_SENTRY_AUTH_TOKEN,
-        debug: true,
-        org: 'lukso',
-        project: 'universalprofile-cloud',
-        sourcemaps: {
-          assets: ['./.nuxt/dist/client/**'],
-        },
-        telemetry: false,
-      }),
+      ...(process.env.NUXT_PUBLIC_SENTRY_AUTH_TOKEN
+        ? [
+            sentryVitePlugin({
+              authToken: process.env.NUXT_PUBLIC_SENTRY_AUTH_TOKEN,
+              debug: true,
+              org: 'lukso',
+              project: 'universalprofile-cloud',
+              sourcemaps: {
+                assets: ['./.nuxt/dist/client/**'],
+              },
+              telemetry: false,
+            }),
+          ]
+        : []),
     ],
     build: {
       rollupOptions: {
         plugins: [
           // ↓ Needed for build
           nodePolyfills(),
         ],
+        output: {
+          sourcemap: true,
+        },
+        onwarn(warning, warn) {
+          // If we can't show which files have bad source map then we might as well not show the error/warning
+          if (warning.message.includes('Sourcemap is likely to be incorrect')) {
+            if (warning.loc?.file || warning.id) {
+              console.warn(
+                `${warning.message} ${warning.loc?.file || warning.id || 'unknown file'}`
+              )
+            }
+            return
+          }
+          warn(warning) // Default behavior
+        },
       },
       commonjsOptions: {
         transformMixedEsModules: true,
+        sourceMap: true,
       },
       sourcemap: true,
     },
@@ -100,7 +142,10 @@ export default defineNuxtConfig({
       },
     },
     optimizeDeps: {
+      // Don't generate source maps for vue files in node_modules.
+      exclude: ['node_modules/**/*.vue'],
       esbuildOptions: {
+        sourcemap: true,
         // Node.js global to browser globalThis
         define: {
           global: 'globalThis',
@@ -117,6 +162,7 @@ export default defineNuxtConfig({
   },
   vue: {
     compilerOptions: {
+      sourceMap: true,
       isCustomElement: (tag: string) => {
         return tag.startsWith('lukso-')
       },
@@ -166,12 +212,6 @@ export default defineNuxtConfig({
     injectManifest: {
       globPatterns: ['**/*.{js,css,html,png,svg,ico}'],
     },
-    client: {
-      installPrompt: true,
-      // you don't need to include this: only for testing purposes
-      // if enabling periodic sync for update use 1 hour or so (periodicSyncForUpdates: 3600)
-      // periodicSyncForUpdates: 20,
-    },
     resolve: {
       alias: {
         process: 'process/browser',
@@ -200,6 +240,7 @@ export default defineNuxtConfig({
         target: 'esnext',
       },
     },
+    sourceMaps: true,
   },
   'graphql-client': {
     watch: true,

package.json

@@ -4,12 +4,12 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "build": "nuxt build",
+    "build": "cross-env NODE_ENV=production nuxt build",
     "dev": "nuxt dev",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
     "lint:fix": "npm-run-all --aggregate-output --continue-on-error --parallel \"lint:*:fix\"",
-    "lint": "npm-run-all --aggregate-output --continue-on-error --parallel \"lint:{eslint,css,fmt,types,biome}\"",
+    "lint": "npm-run-all -l --aggregate-output --continue-on-error --parallel \"lint:{eslint,css,fmt,types,biome}\"",
     "lint:eslint": "eslint --ext '.js,.vue,.ts' .",
     "lint:eslint:fix": "eslint --ext '.js,.vue,.ts' . --fix",
     "lint:css": "stylelint \"**/*.{scss,css,vue}\"",

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": {
       "@/*": [
         "./*"