chore(*): Add workbox service worker

src/routes/+layout.svelte

@@ -6,6 +6,11 @@
 	import SignIn from '$lib/components/SignIn.svelte';
 	import SignOut from '$lib/components/SignOut.svelte';
 
+	import { pwaInfo } from 'virtual:pwa-info';
+	import { pwaAssetsHead } from 'virtual:pwa-assets/head';
+
+	$: webManifestLink = pwaInfo ? pwaInfo.webManifest.linkTag : '';
+
 	export let data;
 	let { supabase } = data;
 	$: ({ supabase } = data);
@@ -18,6 +23,24 @@
 
 	onMount(async () => {
 		await getUser();
+
+		if (pwaInfo) {
+			const { registerSW } = await import('virtual:pwa-register');
+			registerSW({
+				immediate: true,
+				onRegistered(r) {
+					// uncomment following code if you want check for updates
+					// r && setInterval(() => {
+					//    console.log('Checking for sw update')
+					//    r.update()
+					// }, 20000 /* 20s for testing purposes */)
+					console.log(`SW Registered: ${r}`);
+				},
+				onRegisterError(error) {
+					console.log('SW registration error', error);
+				}
+			});
+		}
 	});
 
 	async function getUser() {
@@ -37,6 +60,34 @@
 	}
 </script>
 
+<svelte:head>
+	{#if pwaAssetsHead.themeColor}
+		<meta name="theme-color" content={pwaAssetsHead.themeColor.content} />
+	{/if}
+	{#if pwaAssetsHead.description}
+		<meta name="description" content={pwaAssetsHead.description.content} />
+	{/if}
+	{#each pwaAssetsHead.links as link}
+		<link {...link} />
+	{/each}
+	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+	{@html webManifestLink}
+
+	<!-- <meta
+		name="description"
+		content="A free and open source web app to track completion of a living Pokédex, which works offline."
+	/> -->
+	<meta property="og:title" content="Living Dex Tracker - A free Pokédex completion tool" />
+	<meta property="og:url" content="https://pokedex.jcreek.co.uk" />
+	<meta
+		property="og:description"
+		content="A free and open source web app to track completion of a living Pokédex, which works offline."
+	/>
+	<link rel="canonical" href="https://pokedex.jcreek.co.uk" />
+	<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+	<!-- <link rel="apple-touch-icon" href="%sveltekit.assets%/apple-touch-icon.png" /> -->
+</svelte:head>
+
 <header>
 	<div class="navbar bg-base-100">
 		<div class="flex-1">
@@ -104,3 +155,7 @@
 		<a class="link link-hover">Cookie policy</a>
 	</nav>
 </footer>
+
+{#await import('$lib/components/pwa/ReloadPrompt.svelte') then { default: ReloadPrompt }}
+	<ReloadPrompt />
+{/await}

src/routes/about/+page.svelte

@@ -0,0 +1,30 @@
+<svelte:head>
+	<title>About</title>
+	<meta name="description" content="About this app" />
+</svelte:head>
+
+<div class="content">
+	<h1>About this app</h1>
+
+	<p>
+		This is a <a href="https://kit.svelte.dev">SvelteKit</a> app. You can make your own by typing the
+		following into your command line and following the prompts:
+	</p>
+
+	<pre>npm create svelte@latest</pre>
+
+	<p>
+		The page you're looking at is purely static HTML, with no client-side interactivity needed.
+		Because of that, we don't need to load any JavaScript. Try viewing the page's source, or opening
+		the devtools network panel and reloading.
+	</p>
+
+</div>
+
+<style>
+	.content {
+		width: 100%;
+		max-width: var(--column-width);
+		margin: var(--column-margin-top) auto 0 auto;
+	}
+</style>

src/routes/about/+page.ts

@@ -0,0 +1,9 @@
+import { dev } from '$app/environment';
+
+// we don't need any JS on this page, though we'll load
+// it in dev so that we get hot module replacement...
+export const csr = dev;
+
+// since there's no dynamic data here, we can prerender
+// it so that it gets served as a static asset in prod
+export const prerender = true;