Disable service worker on localhost

2026-05-13 15:30:08 -04:00
parent 978a9a6960
commit 44cc538ce0
1 changed files with 45 additions and 0 deletions
--- a/src/app.html
+++ b/src/app.html
@@ -3,6 +3,51 @@
    <head>
        <meta charset="utf-8" />

+        <script>
+            (() => {
+                const hostname = window.location.hostname;
+                const is_local_dev =
+                    hostname === 'localhost' ||
+                    hostname === '127.0.0.1' ||
+                    hostname === '[::1]' ||
+                    hostname.endsWith('.localhost');
+
+                if (!is_local_dev || !('serviceWorker' in navigator)) return;
+
+                // Prevent the app bootstrap from re-registering a worker on localhost.
+                // The browser can otherwise keep routing fetches through a stale SW
+                // during iterative iframe testing, which is exactly the noise we want to avoid.
+                try {
+                    Object.defineProperty(navigator.serviceWorker, 'register', {
+                        configurable: true,
+                        value: async () => ({})
+                    });
+                } catch {
+                    // If the property is not writable in this browser, the unregister
+                    // pass below still removes any existing worker registration.
+                }
+
+                // Local iframe testing should not keep an older worker alive, because
+                // Chromium can continue to route fetches through the stale worker until
+                // it is explicitly unregistered.
+                navigator.serviceWorker.getRegistrations().then((registrations) => {
+                    for (const registration of registrations) {
+                        registration.unregister().catch(() => {});
+                    }
+                }).catch(() => {});
+
+                // Clear any stale runtime caches as well; local testing should always
+                // rebuild from the current source rather than reusing old worker output.
+                if ('caches' in window) {
+                    caches.keys().then((cache_keys) => {
+                        for (const cache_key of cache_keys) {
+                            caches.delete(cache_key).catch(() => {});
+                        }
+                    }).catch(() => {});
+                }
+            })();
+        </script>
+
        <link rel="icon" href="%sveltekit.assets%/favicon.png" />
        <link rel="manifest" href="/manifest.json" />