From 0a390c95050807927754298e60208f01ad462288 Mon Sep 17 00:00:00 2001 From: Scott Idem Date: Mon, 26 Jan 2026 17:19:30 -0500 Subject: [PATCH] feat(sw): implement and enable robust service worker caching - Re-enabled automatic service worker registration in svelte.config.js. - Implemented a production-ready service-worker.js using SvelteKit metadata (-worker). - Added intelligent caching for build artifacts, static files, and network fallbacks. - This ensures the UI shell and assets load instantly from disk, completing the hydration performance workstream. --- src/service-worker.js | 65 ++++++++++++++++++++++++++++++++++++++----- svelte.config.js | 2 +- 2 files changed, 59 insertions(+), 8 deletions(-) diff --git a/src/service-worker.js b/src/service-worker.js index 763fe804..7458dc2e 100644 --- a/src/service-worker.js +++ b/src/service-worker.js @@ -1,13 +1,64 @@ /// -/// +import { build, files, version } from '$service-worker'; -console.log('Service Worker: Hello from the simplified JS worker!'); +// Create a unique cache name for this deployment +const CACHE = `cache-${version}`; -self.addEventListener('install', () => { - console.log('Service Worker: Installed'); - self.skipWaiting(); +const ASSETS = [ + ...build, // the app itself + ...files // everything in `static` +]; + +self.addEventListener('install', (event) => { + // Create a new cache and add all files to it + async function addFilesToCache() { + const cache = await caches.open(CACHE); + await cache.addAll(ASSETS); + } + + event.waitUntil(addFilesToCache()); }); -self.addEventListener('activate', () => { - console.log('Service Worker: Activated'); +self.addEventListener('activate', (event) => { + // Remove previous cached data from other screens + async function deleteOldCaches() { + for (const key of await caches.keys()) { + if (key !== CACHE) await caches.delete(key); + } + } + + event.waitUntil(deleteOldCaches()); }); + +self.addEventListener('fetch', (event) => { + // ignore POST requests etc + if (event.request.method !== 'GET') return; + + async function respond() { + const url = new URL(event.request.url); + const cache = await caches.open(CACHE); + + // `build`/`files` can always be served from the cache + if (ASSETS.includes(url.pathname)) { + const cachedResponse = await cache.match(url.pathname); + if (cachedResponse) return cachedResponse; + } + + // for everything else, try the network first, but fall back to the cache if we're offline + try { + const response = await fetch(event.request); + + if (response.status === 200) { + cache.put(event.request, response.clone()); + } + + return response; + } catch (err) { + const cachedResponse = await cache.match(event.request); + if (cachedResponse) return cachedResponse; + throw err; + } + } + + event.respondWith(respond()); +}); \ No newline at end of file diff --git a/svelte.config.js b/svelte.config.js index c6b0ddd2..76b23349 100644 --- a/svelte.config.js +++ b/svelte.config.js @@ -15,7 +15,7 @@ const config = { }, kit: { serviceWorker: { - register: false + register: true }, adapter: adapter_node()