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

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',
+            },
+          },
+        ]
       },
     }),
   ],