Let a new service worker take over by itself

The update popup showed on installed PWAs after an update had already
landed: the new worker sat waiting behind the open window. Nothing in the
worker is per-version, so it now skips the wait on install, and the
popup is gone.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

src/components/general/service-worker-registrar.tsx

@@ -1,11 +1,6 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
-import Paper from "@moduletrace/twui/elements/Paper";
-import Row from "@moduletrace/twui/layout/Row";
-import Span from "@moduletrace/twui/layout/Span";
-import Button from "@moduletrace/twui/layout/Button";
-import { RefreshCw } from "lucide-react";
+import { useEffect, useRef } from "react";
 import { PwaServiceWorkerPath } from "@/src/data/pwa-data";
 import clearDevelopmentServiceWorker from "@/src/functions/frontend/clear-development-service-worker";
 
@@ -24,8 +19,11 @@ const DevelopmentClearMaxAttempts = 3;
 
 /**
  * Registers the app's service worker (production only, so development
- * HMR is never cached) and offers a reload once a new version is
- * installed. It never reloads on its own: a bot reply may be running.
+ * HMR is never cached) and checks for a new one hourly and whenever the
+ * app comes back into view. A new worker takes over by itself
+ * (`public/sw.js`), so there is nothing to offer and nothing reloads: a
+ * bot reply may be running. New builds reach the device through the
+ * loading page.
  *
  * In development it does the opposite: it clears the worker and the
  * caches a production deploy left on the device, so the dev server's
@@ -33,8 +31,6 @@ const DevelopmentClearMaxAttempts = 3;
  * `clear-development-service-worker.ts`).
  */
 export default function ServiceWorkerRegistrar() {
-    const [update_ready, setUpdateReady] = useState(false);
-    const [reloading, setReloading] = useState(false);
     const registration = useRef<ServiceWorkerRegistration | null>(null);
 
     useEffect(() => {
@@ -45,26 +41,6 @@ export default function ServiceWorkerRegistrar() {
         let cancelled = false;
         let interval: ReturnType<typeof setInterval> | undefined;
 
-        const watch = (reg: ServiceWorkerRegistration) => {
-            if (reg.waiting && navigator.serviceWorker.controller) {
-                setUpdateReady(true);
-            }
-
-            reg.addEventListener("updatefound", () => {
-                const installing = reg.installing;
-
-                installing?.addEventListener("statechange", () => {
-                    if (cancelled) return;
-                    if (
-                        installing.state == "installed" &&
-                        navigator.serviceWorker.controller
-                    ) {
-                        setUpdateReady(true);
-                    }
-                });
-            });
-        };
-
         navigator.serviceWorker
             .register(PwaServiceWorkerPath, {
                 scope: "/",
@@ -73,7 +49,6 @@ export default function ServiceWorkerRegistrar() {
             .then((reg) => {
                 if (cancelled) return;
                 registration.current = reg;
-                watch(reg);
                 interval = setInterval(() => reg.update().catch(() => {}), UpdateCheckMs);
             })
             .catch((error) => {
@@ -160,57 +135,5 @@ export default function ServiceWorkerRegistrar() {
         };
     }, []);
 
-    useEffect(() => {
-        if (!reloading) return;
-
-        const onControllerChange = () => window.location.reload();
-        navigator.serviceWorker?.addEventListener("controllerchange", onControllerChange);
-        registration.current?.waiting?.postMessage({ type: "SKIP_WAITING" });
-        const fallback = setTimeout(() => window.location.reload(), 1500);
-
-        return () => {
-            clearTimeout(fallback);
-            navigator.serviceWorker?.removeEventListener("controllerchange", onControllerChange);
-        };
-    }, [reloading]);
-
-    if (!update_ready) return null;
-
-    return (
-        <Paper
-            role="status"
-            aria-live="polite"
-            className="fixed bottom-4 right-4 z-[250] w-[min(320px,calc(100vw-32px))] gap-3! p-4 bg-surface shadow-popover! border-hairline dark:bg-surface dark:border-hairline"
-        >
-            <Span className="text-sm font-bold leading-5 text-ink">
-                A new version is ready
-            </Span>
-            <Span className="text-[13px] leading-[18px] text-ink-secondary">
-                Reload to use it. Your conversations are saved.
-            </Span>
-            <Row className="gap-2! flex-nowrap justify-end">
-                <Button
-                    title="Reload later"
-                    type="button"
-                    variant="ghost"
-                    color="gray"
-                    size="small"
-                    disabled={reloading}
-                    onClick={() => setUpdateReady(false)}
-                >
-                    Later
-                </Button>
-                <Button
-                    title="Reload the app"
-                    type="button"
-                    size="small"
-                    loading={reloading}
-                    beforeIcon={<RefreshCw size={15} />}
-                    onClick={() => setReloading(true)}
-                >
-                    Reload
-                </Button>
-            </Row>
-        </Paper>
-    );
+    return null;
 }