Merge branch 'service_worker' into dev_environment

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 />

src/pages/Sites.tsx

@@ -258,7 +258,7 @@ export default function Sites() {
               siteCards.push(
                 <Card
                   key={site.site.key()}
-                  style={{ margin: 10, padding: 5 }}
+                  style={{ margin: 10, padding: 5 }} 
                   onClick={() => {
                     goToSite(site);
                   }}>

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