diff --git a/frontend/src/app.html b/frontend/src/app.html index 1f4fe8f..abea469 100644 --- a/frontend/src/app.html +++ b/frontend/src/app.html @@ -4,7 +4,7 @@ - + %sveltekit.head% diff --git a/frontend/src/service-worker.ts b/frontend/src/service-worker.ts deleted file mode 100644 index e0bd09c..0000000 --- a/frontend/src/service-worker.ts +++ /dev/null @@ -1,81 +0,0 @@ -/// Source: https://dev.to/100lvlmaster/create-a-pwa-with-sveltekit-svelte-a36 -/// - -import { build, files, timestamp } from '$service-worker'; - -const worker = (self as unknown) as ServiceWorkerGlobalScope; -const FILES = `cache${timestamp}`; - -// `build` is an array of all the files generated by the bundler, -// `files` is an array of everything in the `static` directory -const to_cache = build.concat(files); -const staticAssets = new Set(to_cache); - -worker.addEventListener('install', (event) => { - event.waitUntil( - caches - .open(FILES) - .then((cache) => cache.addAll(to_cache)) - .then(() => { - worker.skipWaiting(); - }) - ); -}); - -worker.addEventListener('activate', (event) => { - event.waitUntil( - caches.keys().then(async (keys) => { - // delete old caches - for (const key of keys) { - if (key !== FILES) await caches.delete(key); - } - - worker.clients.claim(); - }) - ); -}); - -/** - * Fetch the asset from the network and store it in the cache. - * Fall back to the cache if the user is offline. - */ -async function fetchAndCache(request: Request) { - const cache = await caches.open(`offline${timestamp}`); - - try { - const response = await fetch(request); - cache.put(request, response.clone()); - return response; - } catch (err) { - const response = await cache.match(request); - if (response) return response; - - throw err; - } -} - -worker.addEventListener('fetch', (event) => { - if (event.request.method !== 'GET' || event.request.headers.has('range')) return; - - const url = new URL(event.request.url); - - // don't try to handle e.g. data: URIs - const isHttp = url.protocol.startsWith('http'); - const isDevServerRequest = - url.hostname === self.location.hostname && url.port !== self.location.port; - const isStaticAsset = url.host === self.location.host && staticAssets.has(url.pathname); - const skipBecauseUncached = event.request.cache === 'only-if-cached' && !isStaticAsset; - - if (isHttp && !isDevServerRequest && !skipBecauseUncached) { - event.respondWith( - (async () => { - // always serve static files and bundler-generated assets from cache. - // if your application has other URLs with data that will never change, - // set this variable to true for them and they will only be fetched once. - const cachedAsset = isStaticAsset && (await caches.match(event.request)); - - return cachedAsset || fetchAndCache(event.request); - })() - ); - } -}); \ No newline at end of file diff --git a/frontend/src/service-worker/indes.ts b/frontend/src/service-worker/indes.ts new file mode 100644 index 0000000..5a4466b --- /dev/null +++ b/frontend/src/service-worker/indes.ts @@ -0,0 +1,60 @@ +/// + +import { build, files, version } from '$service-worker'; + +const CACHE = `cache-${version}`; + +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', (event) => { + // Remove previous cached data from disk + 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)) { + return cache.match(url.pathname); + } + + // 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 { + return cache.match(event.request); + } + } + + event.respondWith(respond()); +});