diff --git a/src/app.html b/src/app.html index 5dfa9701..39ee3752 100644 --- a/src/app.html +++ b/src/app.html @@ -2,7 +2,9 @@ - + + + %sveltekit.head% diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index b469920d..5a073dd1 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,4 +1,5 @@
diff --git a/src/service-worker.ts b/src/service-worker.ts new file mode 100644 index 00000000..4c15bb6a --- /dev/null +++ b/src/service-worker.ts @@ -0,0 +1,80 @@ +/// + +import { build, files, version } from '$service-worker'; + +const worker = self as unknown as ServiceWorkerGlobalScope; +const FILES = `cache${version}`; + +// `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${version}`); + + 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); + })() + ); + } +}); diff --git a/static/android-chrome-192x192.png b/static/android-chrome-192x192.png new file mode 100644 index 00000000..ee0ee629 Binary files /dev/null and b/static/android-chrome-192x192.png differ diff --git a/static/android-chrome-512x512.png b/static/android-chrome-512x512.png new file mode 100644 index 00000000..a2a0971c Binary files /dev/null and b/static/android-chrome-512x512.png differ diff --git a/static/apple-touch-icon.png b/static/apple-touch-icon.png new file mode 100644 index 00000000..653b4f1f Binary files /dev/null and b/static/apple-touch-icon.png differ diff --git a/static/favicon-16x16.png b/static/favicon-16x16.png new file mode 100644 index 00000000..1b1dda20 Binary files /dev/null and b/static/favicon-16x16.png differ diff --git a/static/favicon-32x32.png b/static/favicon-32x32.png new file mode 100644 index 00000000..66bc5f45 Binary files /dev/null and b/static/favicon-32x32.png differ diff --git a/static/favicon.ico b/static/favicon.ico new file mode 100644 index 00000000..3cf862e2 Binary files /dev/null and b/static/favicon.ico differ diff --git a/static/favicon.png b/static/favicon.png deleted file mode 100644 index 825b9e65..00000000 Binary files a/static/favicon.png and /dev/null differ diff --git a/static/manifest.json b/static/manifest.json new file mode 100644 index 00000000..7cc093c9 --- /dev/null +++ b/static/manifest.json @@ -0,0 +1,12 @@ +{ + "name": "Lists Pink", + "start_url": "/", + "short_name": "lists pink", + "icons": [ + { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" }, + { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" } + ], + "theme_color": "##d946ef", + "background_color": "#f0abfc", + "display": "standalone" +} diff --git a/static/ms-application.png b/static/ms-application.png new file mode 100644 index 00000000..cfb8b7b6 Binary files /dev/null and b/static/ms-application.png differ