Merge pull request #591 from Rushikesh-Sonawane99/release-1.1.0

Issue #PS-000 chore: Added custom service worker for popup display on new deployment

next.config.mjs

@@ -115,7 +115,8 @@ const pwaConfig = withPWA({
   dest: 'public',
   register: true,
   skipWaiting: true,
-  disable: process.env.NODE_ENV === 'development'
+  disable: process.env.NODE_ENV === 'development',
+  customWorkerDir: 'public'
 });
 
 export default pwaConfig(nextConfig);

public/custom-sw.js

@@ -0,0 +1,30 @@
+self.addEventListener('install', (event) => {
+    console.log('Service Worker installing...');
+    self.skipWaiting();
+  });
+
+  self.addEventListener('activate', (event) => {
+    console.log('Service Worker activating...');
+    event.waitUntil(self.clients.claim());
+  });
+
+  self.addEventListener('fetch', (event) => {
+    console.log('Fetching:', event.request.url);
+
+    event.respondWith(
+      caches.match(event.request).then((response) => {
+        return response || fetch(event.request);
+      })
+    );
+  });
+
+  self.addEventListener('message', (event) => {
+    if (event.data && event.data.type === 'SKIP_WAITING') {
+      self.skipWaiting();
+    }
+  });
+
+  const VERSION = '1.0.1'; // Update this version for each deployment
+  console.log(`Service Worker Version: ${VERSION}`);
+
+

src/components/UpdatePopup.tsx

@@ -0,0 +1,38 @@
+import { useEffect, useState } from 'react';
+
+export default function UpdateNotification() {
+  const [updateAvailable, setUpdateAvailable] = useState(false);
+
+  useEffect(() => {
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker.addEventListener('controllerchange', () => {
+        setUpdateAvailable(true);
+      });
+
+      navigator.serviceWorker.ready.then((registration) => {
+        registration.addEventListener('updatefound', () => {
+          const newWorker = registration.installing;
+          newWorker?.addEventListener('statechange', () => {
+            if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
+              setUpdateAvailable(true);
+            }
+          });
+        });
+      });
+    }
+  }, []);
+
+  const handleReload = () => {
+    if (navigator.serviceWorker.controller) {
+      navigator.serviceWorker.controller.postMessage({ type: 'SKIP_WAITING' });
+      window.location.reload();
+    }
+  };
+
+  return updateAvailable ? (
+    <div>
+      <p>A new version is available!</p>
+      <button onClick={handleReload}>Reload</button>
+    </div>
+  ) : null;
+}