added some service worker settings, it should now serve cached website while getting the latest. the new listener in main.tsx will fire if a change is detected

src/app/main.tsx

@@ -12,6 +12,12 @@ import App from './App'
 
 // };
 
+if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.addEventListener('controllerchange', () => {
+    window.location.reload()
+  })
+}
+
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <App />

vite.config.ts

@@ -9,12 +9,29 @@ export default defineConfig({
     react(), 
     tsconfigPaths(),
     VitePWA({
-      
       registerType: 'autoUpdate', // Automatically updates the service worker when a new version is available
       workbox: {
         globPatterns: ['**/*.{js,css,html,png,jpg,svg}'], // Cache all common asset types
         maximumFileSizeToCacheInBytes: 20 * 1024 * 1024, // 20 MiB
-        cleanupOutdatedCaches: true
+        cleanupOutdatedCaches: true,
+        navigateFallback: "/index.html",
+        runtimeCaching: [
+          {
+            urlPattern: ({ request }) => request.destination === 'document',
+            handler: 'NetworkFirst',
+            options: {
+              cacheName: 'html-cache',
+            },
+          },
+          {
+            urlPattern: ({ request }) =>
+              ['style', 'script', 'worker'].includes(request.destination),
+            handler: 'StaleWhileRevalidate',
+            options: {
+              cacheName: 'assets-cache',
+            },
+          },
+        ]
       },
     }),
   ],