feat: implement official PWA Service Worker for offline support and app badging

Author: pavanpaik

web/public/sw.js

@@ -0,0 +1,54 @@
+const CACHE_NAME = 'slr-cache-v1';
+
+// Assets to cache immediately
+const PRECACHE_ASSETS = [
+    '/',
+    '/manifest.webmanifest',
+    '/icon-192.png',
+    '/icon-512.png',
+];
+
+self.addEventListener('install', (event) => {
+    event.waitUntil(
+        caches.open(CACHE_NAME).then((cache) => {
+            return cache.addAll(PRECACHE_ASSETS);
+        })
+    );
+    self.skipWaiting();
+});
+
+self.addEventListener('activate', (event) => {
+    event.waitUntil(
+        caches.keys().then((cacheNames) => {
+            return Promise.all(
+                cacheNames.map((cacheName) => {
+                    if (cacheName !== CACHE_NAME) {
+                        return caches.delete(cacheName);
+                    }
+                })
+            );
+        })
+    );
+    self.clients.claim();
+});
+
+self.addEventListener('fetch', (event) => {
+    // Skip cross-origin requests (like Clerk or Neon)
+    if (!event.request.url.startsWith(self.location.origin)) return;
+
+    // Stale-while-revalidate strategy
+    event.respondWith(
+        caches.open(CACHE_NAME).then((cache) => {
+            return cache.match(event.request).then((response) => {
+                const fetchPromise = fetch(event.request).then((networkResponse) => {
+                    // Cache the new response if it's a valid GET request
+                    if (event.request.method === 'GET' && networkResponse.status === 200) {
+                        cache.put(event.request, networkResponse.clone());
+                    }
+                    return networkResponse;
+                });
+                return response || fetchPromise;
+            });
+        })
+    );
+});

web/src/app/layout.tsx

@@ -4,6 +4,7 @@ import Layout from "@/components/layout/Layout";
 import { LanguageProvider } from "@/context/LanguageContext";
 import "./globals.css";
 import UpdateDetector from "@/components/common/UpdateDetector";
+import ServiceWorkerRegistration from "@/components/common/ServiceWorkerRegistration";
 import { Analytics } from "@vercel/analytics/next";
 import { SpeedInsights } from "@vercel/speed-insights/next";
 
@@ -122,6 +123,7 @@ export default function RootLayout({
           <LanguageProvider>
             {children}
             <UpdateDetector />
+            <ServiceWorkerRegistration />
             <Analytics />
             <SpeedInsights />
           </LanguageProvider>

web/src/components/common/ServiceWorkerRegistration.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { useEffect } from 'react';
+
+export default function ServiceWorkerRegistration() {
+    useEffect(() => {
+        if ('serviceWorker' in navigator && window.location.hostname !== 'localhost') {
+            window.addEventListener('load', () => {
+                navigator.serviceWorker
+                    .register('/sw.js')
+                    .then((registration) => {
+                        console.log('SW registered: ', registration);
+                    })
+                    .catch((registrationError) => {
+                        console.log('SW registration failed: ', registrationError);
+                    });
+            });
+        }
+    }, []);
+
+    return null;
+}