Merge pull request #1631 from devtron-labs/service-worker-fix

fix: Service worker issue

Author: eshankvaish

package.json

@@ -121,7 +121,9 @@
         "workbox-window": "7.0.0",
         "workbox-core": "^7.0.0",
         "workbox-precaching": "^7.0.0",
-        "workbox-routing": "^7.0.0"
+        "workbox-routing": "^7.0.0",
+        "workbox-navigation-preload": "7.0.0",
+        "workbox-strategies": "7.0.0"
     },
     "jest": {
         "collectCoverageFrom": [

src/App.tsx

@@ -47,6 +47,8 @@ export default function App() {
     const updateToastRef = useRef(null)
     const [errorPage, setErrorPage] = useState<boolean>(false)
     const isOnline = useOnline()
+    const refreshing = useRef(false)
+    const [bgUpdated, setBGUpdated] = useState(false)
     const [validating, setValidating] = useState(true)
     const [approvalToken, setApprovalToken] = useState<string>('')
     const [approvalType, setApprovalType] = useState<APPROVAL_MODAL_TYPE>(APPROVAL_MODAL_TYPE.CONFIG)
@@ -129,7 +131,22 @@ export default function App() {
         }
     }
 
+    function handleControllerChange() {
+        if (refreshing.current) {
+            return
+        }
+        if (document.visibilityState === 'visible') {
+            window.location.reload()
+            refreshing.current = true
+        } else {
+            setBGUpdated(true)
+        }
+    }
+
     useEffect(() => {
+        if (navigator.serviceWorker) {
+            navigator.serviceWorker.addEventListener('controllerchange', handleControllerChange)
+        }
         // If not K8S_CLIENT then validateToken otherwise directly redirect
         if (!window._env_.K8S_CLIENT) {
             // By Passing validations for direct email approval notifications
@@ -142,6 +159,9 @@ export default function App() {
             setValidating(false)
             defaultRedirection()
         }
+        return () => {
+          navigator.serviceWorker.removeEventListener('controllerchange', handleControllerChange)
+        }
     }, [])
 
     const {
@@ -150,9 +170,20 @@ export default function App() {
     } = useRegisterSW({
         onRegisteredSW(swUrl, r) {
             console.log(`Service Worker at: ${swUrl}`)
-            if (r) {
-                r.update()
-            }
+            r &&
+                setInterval(async () => {
+                    if (!(!r.installing && navigator)) return
+                    if ('connection' in navigator && !navigator.onLine) return
+                    const resp = await fetch(swUrl, {
+                        cache: 'no-store',
+                        headers: {
+                            cache: 'no-store',
+                            'cache-control': 'no-cache',
+                        },
+                    })
+
+                    if (resp?.status === 200) await r.update()
+                }, 1000 * 60)
         },
         onRegisterError(error) {
             console.log('SW registration error', error)
@@ -169,10 +200,11 @@ export default function App() {
         if (window.isSecureContext && navigator.serviceWorker) {
             // check for sw updates on page change
             navigator.serviceWorker.getRegistrations().then((regs) => regs.forEach((reg) => reg.update()))
-            if (!needRefresh) {
-                return
+            if (needRefresh) {
+                update()
+            } else if (toast.isActive(updateToastRef.current)) {
+                toast.dismiss(updateToastRef.current)
             }
-            update()
         }
     }, [location])
 
@@ -200,6 +232,24 @@ export default function App() {
         }
     }, [needRefresh])
 
+    useEffect(() => {
+        if (!bgUpdated) {
+            return
+        }
+        const bgUpdatedToastBody = (
+            <UpdateToast
+                onClick={() => window.location.reload()}
+                text="This page has been updated. Please save any unsaved changes and refresh."
+                buttonText="Reload"
+            />
+        )
+        if (toast.isActive(updateToastRef.current)) {
+            toast.update(updateToastRef.current, { render: bgUpdatedToastBody })
+        } else {
+            updateToastRef.current = toast.info(bgUpdatedToastBody, { autoClose: false, closeButton: false })
+        }
+    }, [bgUpdated])
+
     return (
         <Suspense fallback={null}>
             {validating ? (

src/service-worker.ts

@@ -1,5 +1,8 @@
-import { cleanupOutdatedCaches, createHandlerBoundToURL, precacheAndRoute } from 'workbox-precaching'
-import { NavigationRoute, registerRoute } from 'workbox-routing'
+import { precacheAndRoute, cleanupOutdatedCaches } from 'workbox-precaching'
+import { NavigationRoute, registerRoute, Route } from 'workbox-routing'
+import * as navigationPreload from 'workbox-navigation-preload'
+import { NetworkFirst, StaleWhileRevalidate } from 'workbox-strategies'
+import { clientsClaim } from 'workbox-core'
 
 declare let self: ServiceWorkerGlobalScope
 
@@ -10,11 +13,40 @@ self.addEventListener('message', (event) => {
     }
 })
 
-// self.__WB_MANIFEST is default injection point
+clientsClaim()
+
+// Precache the manifest
 precacheAndRoute(self.__WB_MANIFEST)
 
 // clean old assets
 cleanupOutdatedCaches()
 
-// to allow work offline
-registerRoute(new NavigationRoute(createHandlerBoundToURL('index.html')))
+// Enable navigation preload
+navigationPreload.enable()
+
+// Create a new navigation route that uses the Network-first, falling back to
+// cache strategy for navigation requests with its own cache. This route will be
+// handled by navigation preload. The NetworkOnly strategy will work as well.
+const navigationRoute = new NavigationRoute(
+    new NetworkFirst({
+        cacheName: 'navigations',
+    }),
+)
+
+// Register the navigation route
+registerRoute(navigationRoute)
+
+// Create a route for image, script, or style requests that use a
+// stale-while-revalidate strategy. This route will be unaffected
+// by navigation preload.
+const staticAssetsRoute = new Route(
+    ({ request }) => {
+        return ['image', 'script', 'style'].includes(request.destination)
+    },
+    new StaleWhileRevalidate({
+        cacheName: 'static-assets',
+    }),
+)
+
+// Register the route handling static assets
+registerRoute(staticAssetsRoute)

vite.config.ts

@@ -95,11 +95,6 @@ export default defineConfig(({ mode }) => {
         baseConfig['define'] = {
             global: 'globalThis',
         }
-    // } else {
-    //     baseConfig['define'] = {
-    //         __BASE_URL__: '/dashboard/',
-    //         __ORCHESTRATOR_ROOT__: '/orchestrator',
-    //     }
     }
 
     return baseConfig