ft: add experimental service worker gen for the app

package.json

@@ -13,6 +13,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.17.0",
+    "@rollup/plugin-replace": "^6.0.2",
     "@stylistic/eslint-plugin": "^2.12.1",
     "@tailwindcss/forms": "^0.5.9",
     "@vitejs/plugin-vue": "^5.2.1",

src/main.js

@@ -2,4 +2,21 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import './index.css'
 
+/**
+ * Register the service worker
+ * */
+if ('serviceWorker' in navigator) {
+  window.addEventListener('load', () => {
+    const swPath = '/pwa-generator/sw.js' // Use the base path for the service worker
+
+    navigator.serviceWorker
+      .register(swPath, { scope: '/pwa-generator/' }) // Ensure the scope matches the base path
+      .then((reg) => {
+        console.log(`Service Worker registered for ${reg.scope}`)
+      })
+      .catch((error) => {
+        console.error('Service Worker registration failed:', error)
+      })
+  })
+}
 createApp(App).mount('#app')

src/service-worker.js

@@ -0,0 +1,24 @@
+// eslint-disable-next-line no-undef
+const CACHE_NAME = `pwa-cache-${process.env.BUILD_HASH}`
+// Install event - Cache static assets
+self.addEventListener('install', () => {
+  self.skipWaiting()
+  console.log('The install event will be here')
+})
+
+// Activate event - Clean up old caches
+self.addEventListener('activate', (event) => {
+  event.waitUntil(
+    self.clients.claim(),
+  )
+})
+
+// Fetch event - Serve cached files or fetch from the network
+self.addEventListener('fetch', (event) => {
+  console.log('Handling fetch')
+  event.respondWith(
+    caches.match(event.request).then((response) => {
+      return response || fetch(event.request)
+    }),
+  )
+})

vite.config.js

@@ -1,8 +1,26 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import replace from '@rollup/plugin-replace'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [
+    vue(),
+    replace({
+      'preventAssignment': true,
+      'process.env.BUILD_HASH': JSON.stringify(Date.now()),
+    }),
+  ],
   base: '/pwa-generator',
+  build: {
+    rollupOptions: {
+      input: {
+        main: 'index.html',
+        serviceWorker: 'src/service-worker.js',
+      },
+      output: {
+        entryFileNames: chunkInfo => chunkInfo.name == 'serviceWorker' ? 'sw.js' : 'assets/[name]-[hash].js',
+      },
+    },
+  },
 })