fix: update service worker when navigating

Author: devrsi0n

.github/workflows/bundle-analysis.yml

@@ -53,3 +53,14 @@ jobs:
           NEXTAUTH_URL: ${{ secrets.NEXTAUTH_URL }}
           NEXT_PUBLIC_APP_URL: ${{ secrets.NEXT_PUBLIC_APP_URL }}
           SUPABASE_URL: ${{ secrets.SUPABASE_URL }}
+          PRIVATE_VAPID: ${{ secrets.PRIVATE_VAPID }}
+          EMAIL_API_KEY: ${{ secrets.EMAIL_API_KEY }}
+          STRIPE_SECRET_KEY: ${{ secrets.STRIPE_SECRET_KEY }}
+          STRIPE_SIGN_SECRET: ${{ secrets.STRIPE_SIGN_SECRET }}
+          SW_CACHE_ID: ${{ secrets.SW_CACHE_ID }}
+          QSTASH_NEXT_SIGNING_KEY: ${{ secrets.QSTASH_NEXT_SIGNING_KEY }}
+          QSTASH_CURRENT_SIGNING_KEY: ${{ secrets.QSTASH_CURRENT_SIGNING_KEY }}
+          TINYBIRD_ADMIN_TOKEN: ${{ secrets.TINYBIRD_ADMIN_TOKEN }}
+          CRON_SECRET: ${{ secrets.CRON_SECRET }}
+          NEXT_PUBLIC_VAPID: ${{ secrets.NEXT_PUBLIC_VAPID }}
+          NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY: ${{ secrets.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY }}

.github/workflows/release.yml

@@ -61,3 +61,14 @@ jobs:
           NEXTAUTH_URL: ${{ secrets.NEXTAUTH_URL }}
           NEXT_PUBLIC_APP_URL: ${{ secrets.NEXT_PUBLIC_APP_URL }}
           SUPABASE_URL: ${{ secrets.SUPABASE_URL }}
+          PRIVATE_VAPID: ${{ secrets.PRIVATE_VAPID }}
+          EMAIL_API_KEY: ${{ secrets.EMAIL_API_KEY }}
+          STRIPE_SECRET_KEY: ${{ secrets.STRIPE_SECRET_KEY }}
+          STRIPE_SIGN_SECRET: ${{ secrets.STRIPE_SIGN_SECRET }}
+          SW_CACHE_ID: ${{ secrets.SW_CACHE_ID }}
+          QSTASH_NEXT_SIGNING_KEY: ${{ secrets.QSTASH_NEXT_SIGNING_KEY }}
+          QSTASH_CURRENT_SIGNING_KEY: ${{ secrets.QSTASH_CURRENT_SIGNING_KEY }}
+          TINYBIRD_ADMIN_TOKEN: ${{ secrets.TINYBIRD_ADMIN_TOKEN }}
+          CRON_SECRET: ${{ secrets.CRON_SECRET }}
+          NEXT_PUBLIC_VAPID: ${{ secrets.NEXT_PUBLIC_VAPID }}
+          NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY: ${{ secrets.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY }}

packages/ui/src/contexts/notification-context/use-reload-when-sw-change.ts

@@ -27,52 +27,59 @@ export function useReloadWhenSwChange() {
     }
 
     navigator.serviceWorker.register('/sw.js').then((registration) => {
-      // Track updates to the Service Worker.
       if (!navigator.serviceWorker.controller) {
-        // The window client isn't currently controlled so it's a new service
-        // worker that will activate immediately
         return;
       }
       registration.update();
 
-      handleNewServiceWorker(registration, () => {
-        if (!registration.waiting) {
-          // Just to ensure registration.waiting is available before
-          // calling postMessage()
-          return;
+      // Handle both page refresh/close and SPA navigation
+      const skipWaitingOnNavigation = () => {
+        if (registration.waiting) {
+          logger.debug('Activating new service worker on navigation');
+          registration.waiting.postMessage('skipWaiting');
         }
+      };
 
-        registration.waiting.postMessage('skipWaiting');
-      });
-    });
-  }, []);
-}
+      // Listen for regular page unload
+      window.addEventListener('beforeunload', skipWaitingOnNavigation);
 
-function handleNewServiceWorker(
-  registration: ServiceWorkerRegistration,
-  callback: () => void,
-) {
-  if (registration.waiting) {
-    // SW is waiting to activate. Can occur if multiple clients open and
-    // one of the clients is refreshed.
-    return callback();
-  }
+      // Listen for SPA navigation
+      window.addEventListener('popstate', skipWaitingOnNavigation);
+      const originalPushState = history.pushState.bind(history);
+      const originalReplaceState = history.replaceState.bind(history);
 
-  function listenInstalledStateChange() {
-    registration.installing?.addEventListener('statechange', (event: Event) => {
-      // @ts-ignore
-      if (event.target?.state === 'installed') {
-        // A new service worker is available, inform the user
-        callback();
-      }
-    });
-  }
+      history.pushState = (...args) => {
+        originalPushState(...args);
+        skipWaitingOnNavigation();
+      };
+
+      history.replaceState = (...args) => {
+        originalReplaceState(...args);
+        skipWaitingOnNavigation();
+      };
 
-  if (registration.installing) {
-    return listenInstalledStateChange();
-  }
+      registration.addEventListener('updatefound', () => {
+        registration.installing?.addEventListener(
+          'statechange',
+          (event: Event) => {
+            // @ts-ignore
+            if (event.target?.state === 'installed' && registration.waiting) {
+              // Will activate on next navigation
+              logger.debug(
+                'New service worker installed, waiting for navigation',
+              );
+            }
+          },
+        );
+      });
 
-  // We are currently controlled so a new SW may be found...
-  // Add a listener in case a new SW is found,
-  registration.addEventListener('updatefound', listenInstalledStateChange);
+      // Cleanup
+      return () => {
+        window.removeEventListener('beforeunload', skipWaitingOnNavigation);
+        window.removeEventListener('popstate', skipWaitingOnNavigation);
+        history.pushState = originalPushState;
+        history.replaceState = originalReplaceState;
+      };
+    });
+  }, []);
 }