Offline support

package.json

@@ -26,6 +26,7 @@
 		"@sveltejs/adapter-static": "^2.0.3",
 		"@sveltejs/kit": "^1.20.4",
 		"@vite-pwa/assets-generator": "^0.0.10",
+		"@vite-pwa/sveltekit": "^0.2.7",
 		"patch-package": "^8.0.0",
 		"prettier": "^2.8.0",
 		"prettier-plugin-svelte": "^2.10.1",

src/app.d.ts

@@ -1,3 +1,5 @@
+/// <reference types="vite-plugin-pwa/svelte" />
+
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
 declare global {

src/lib/components/app-update-prompt.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import { useRegisterSW } from 'virtual:pwa-register/svelte';
+	import Button from './button.svelte';
+
+	const { needRefresh, updateServiceWorker } = useRegisterSW({
+		onRegisteredSW(swUrl, registration) {
+			if (!registration) return;
+
+			setInterval(async () => {
+				if (!(!registration.installing && navigator)) return;
+				if ('connection' in navigator && !navigator.onLine) return;
+
+				const sw = await fetch(swUrl, {
+					cache: 'no-store',
+					headers: {
+						cache: 'no-store',
+						'cache-control': 'no-cache',
+					},
+				});
+
+				if (sw?.status === 200) await registration.update();
+			}, 60 * 60 * 1000);
+		},
+	});
+
+	function close() {
+		needRefresh.set(false);
+	}
+</script>
+
+{#if $needRefresh}
+	<div role="alert" class="app-update-prompt">
+		<p class="app-update-prompt__text">The app has been updated. Reload to update.</p>
+		<div class="app-update-prompt__buttons">
+			<Button on:click={() => updateServiceWorker(true)}>Reload</Button>
+			<Button secondary on:click={close}>Dismiss</Button>
+		</div>
+	</div>
+{/if}
+
+<style lang="scss">
+	.app-update-prompt {
+		position: fixed;
+		left: 1rem;
+		bottom: 2rem;
+		padding: 1rem;
+		min-width: 200px;
+		max-width: calc(50vw - 1rem);
+		border-radius: var(--border-radius);
+		background-color: var(--secondary-alt);
+		box-shadow: var(--card-shadow);
+
+		&__text {
+			color: var(--primary-inverse);
+			text-wrap: pretty;
+		}
+
+		&__buttons {
+			display: flex;
+			gap: 0.5rem;
+			width: fit-content;
+			margin-right: auto;
+		}
+	}
+</style>

src/lib/components/notes/note-add-button.svelte

@@ -22,7 +22,7 @@
 		height: 4rem;
 		margin: 0;
 		border-radius: 50%;
-		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+		box-shadow: var(--card-shadow);
 
 		& > :global(svg) {
 			width: 2rem;

src/routes/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import AppHeader from '$lib/components/app-header.svelte';
+	import AppUpdatePrompt from '$lib/components/app-update-prompt.svelte';
 	import FilterTags from '$lib/components/filter-tags.svelte';
 	import NoteAddButton from '$lib/components/notes/note-add-button.svelte';
 	import NoteListPlaceholder from '$lib/components/notes/note-list-placeholder.svelte';
@@ -27,6 +28,7 @@
 </main>
 <WelcomeModal />
 <SettingsModal />
+<AppUpdatePrompt />
 
 <style lang="scss">
 	main {

vite.config.ts

@@ -1,5 +1,6 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
+import { SvelteKitPWA } from '@vite-pwa/sveltekit';
 
 export default defineConfig({
 	plugins: [
@@ -14,6 +15,16 @@ export default defineConfig({
 				});
 			},
 		},
+		SvelteKitPWA({
+			strategies: 'generateSW',
+			registerType: 'prompt',
+			manifest: false,
+			workbox: {
+				globPatterns: ['**/*.{js,css,html,ico,png,svg,ttf,wasm}'],
+				globIgnores: ['**/apple-splash-*'],
+				maximumFileSizeToCacheInBytes: 5000000,
+			},
+		}),
 	],
 	build: {
 		target: 'esnext',