From 7537c120b45c73c9c5ee7f188f4370a8f81fdc89 Mon Sep 17 00:00:00 2001
From: Carter <carter@adaptiveagriculture.ca>
Date: Thu, 29 May 2025 15:45:25 -0600
Subject: [PATCH] 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 |  6 ++++++
 vite.config.ts   | 21 +++++++++++++++++++--
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/app/main.tsx b/src/app/main.tsx
index 837734f..e2acdd9 100644
--- a/src/app/main.tsx
+++ b/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 />
diff --git a/vite.config.ts b/vite.config.ts
index 23c651e..551f1ce 100644
--- a/vite.config.ts
+++ b/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',
+            },
+          },
+        ]
       },
     }),
   ],