Add PWA update notification prompt

Implements service worker update detection with user prompt to refresh

Author: chriswritescode-dev

frontend/src/App.tsx

@@ -14,6 +14,7 @@ import { Register } from './pages/Register'
 import { Setup } from './pages/Setup'
 import { SettingsDialog } from './components/settings/SettingsDialog'
 import { VersionNotifier } from './components/VersionNotifier'
+import { PwaUpdatePrompt } from '@/components/PwaUpdatePrompt'
 import { useTheme } from './hooks/useTheme'
 import { TTSProvider } from './contexts/TTSContext'
 import { AuthProvider } from './contexts/AuthContext'
@@ -72,8 +73,9 @@ function AppShell() {
   useEffect(() => {
     const channel = new BroadcastChannel('notification-click')
     channel.onmessage = (event: MessageEvent) => {
-      if (event.data?.url) {
-        navigate(event.data.url)
+      const data = event.data as { url?: string } | null | undefined
+      if (typeof data?.url === 'string') {
+        navigate(data.url)
       }
     }
     return () => channel.close()
@@ -87,6 +89,7 @@ function AppShell() {
         <SSHHostKeyDialogWrapper />
         <SettingsDialog />
         <VersionNotifier />
+        <PwaUpdatePrompt />
         <Toaster
           position="bottom-right"
           expand={false}

frontend/src/components/PwaUpdatePrompt.tsx

@@ -0,0 +1,21 @@
+import { useEffect } from 'react'
+import { showToast } from '@/lib/toast'
+import { onServiceWorkerUpdate, offServiceWorkerUpdate } from '@/lib/serviceWorker'
+
+export function PwaUpdatePrompt() {
+  useEffect(() => {
+    onServiceWorkerUpdate(() => {
+      showToast.info('New build deployed', {
+        description: 'Refresh to load the latest changes.',
+        action: {
+          label: 'Refresh',
+          onClick: () => window.location.reload(),
+        },
+        duration: Infinity,
+      })
+    })
+    return () => offServiceWorkerUpdate()
+  }, [])
+
+  return null
+}

frontend/src/lib/serviceWorker.ts

@@ -1,8 +1,64 @@
 import "../sw?worker";
 
+type UpdateCallback = () => void;
+
+let updateCallback: UpdateCallback | null = null;
+let updatePending = false;
+
+function notifyUpdate() {
+  if (!updateCallback) {
+    updatePending = true;
+    return;
+  }
+  updatePending = false;
+  updateCallback();
+}
+
+export function onServiceWorkerUpdate(callback: UpdateCallback): void {
+  updateCallback = callback;
+  if (updatePending) {
+    updatePending = false;
+    callback();
+  }
+}
+
+export function offServiceWorkerUpdate(): void {
+  updateCallback = null;
+}
+
 export function registerServiceWorker(): void {
   if (!("serviceWorker" in navigator)) return;
-  navigator.serviceWorker.register("/sw.js", { scope: "/" }).catch(() => {});
+
+  navigator.serviceWorker.addEventListener("message", (event) => {
+    if (event.data?.type === "SW_UPDATED") {
+      notifyUpdate();
+    }
+  });
+
+  navigator.serviceWorker.ready.then((registration) => {
+    if (registration.waiting) {
+      notifyUpdate();
+    }
+  });
+
+  navigator.serviceWorker
+    .register("/sw.js", { scope: "/" })
+    .then((registration) => {
+      registration.addEventListener("updatefound", () => {
+        const installing = registration.installing;
+        if (!installing) return;
+        installing.addEventListener("statechange", () => {
+          if (installing.state === "installed" && navigator.serviceWorker.controller) {
+            notifyUpdate();
+          }
+        });
+      });
+
+      setInterval(() => {
+        registration.update().catch(() => {});
+      }, 60 * 60 * 1000);
+    })
+    .catch(() => {});
 }
 
 export async function getServiceWorkerRegistration(): Promise<ServiceWorkerRegistration | null> {

frontend/src/sw.ts

@@ -11,6 +11,12 @@ self.addEventListener("activate", (event) => {
     caches.keys().then((names) =>
       Promise.all(names.map((name) => caches.delete(name)))
     ).then(() => self.clients.claim())
+    .then(() => self.clients.matchAll({ type: "window" }))
+    .then((clients) => {
+      for (const client of clients) {
+        client.postMessage({ type: "SW_UPDATED" });
+      }
+    })
   );
 });