add pwa setup

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "scratchpad",
 	"version": "0.0.1",
-	"private": true,
+	"homepage": "https://andreidobrinski.com/scratchpad",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",
@@ -18,13 +18,15 @@
 	"devDependencies": {
 		"@playwright/test": "^1.28.1",
 		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/adapter-static": "^3.0.1",
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
 		"@types/eslint": "8.56.0",
 		"@types/uuid": "^9.0.7",
 		"@typescript-eslint/eslint-plugin": "^6.0.0",
 		"@typescript-eslint/parser": "^6.0.0",
 		"@vite-pwa/assets-generator": "^0.2.3",
+		"@vite-pwa/sveltekit": "^0.3.0",
 		"@xstate/svelte": "^3.0.2",
 		"autoprefixer": "^10.4.16",
 		"eslint": "^8.56.0",
@@ -48,4 +50,4 @@
 		"xstate": "^5.5.2"
 	},
 	"type": "module"
-}
+}

src/app.d.ts

@@ -1,3 +1,6 @@
+import 'vite-plugin-pwa/svelte';
+import 'vite-plugin-pwa/info';
+
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
 declare global {

src/lib/ReloadPrompt.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	import { useRegisterSW } from 'virtual:pwa-register/svelte';
+	const { needRefresh, updateServiceWorker, offlineReady } = useRegisterSW({
+		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);
+		}
+	});
+	const close = () => {
+		offlineReady.set(false);
+		needRefresh.set(false);
+	};
+	$: toast = $offlineReady || $needRefresh;
+</script>
+
+{#if toast}
+	<div class="pwa-toast" role="alert">
+		<div class="message">
+			{#if $offlineReady}
+				<span> App ready to work offline </span>
+			{:else}
+				<span> New content available, click on reload button to update. </span>
+			{/if}
+		</div>
+		{#if $needRefresh}
+			<button on:click={() => updateServiceWorker(true)}> Reload </button>
+		{/if}
+		<button on:click={close}> Close </button>
+	</div>
+{/if}
+
+<style>
+	.pwa-toast {
+		position: fixed;
+		right: 0;
+		bottom: 0;
+		margin: 16px;
+		padding: 12px;
+		border: 1px solid #8885;
+		border-radius: 4px;
+		z-index: 2;
+		text-align: left;
+		box-shadow: 3px 4px 5px 0 #8885;
+		background-color: white;
+	}
+	.pwa-toast .message {
+		margin-bottom: 8px;
+	}
+	.pwa-toast button {
+		border: 1px solid #8885;
+		outline: none;
+		margin-right: 5px;
+		border-radius: 2px;
+		padding: 3px 10px;
+	}
+</style>

src/routes/+layout.svelte

@@ -1,7 +1,39 @@
 <script>
+	import { onMount } from 'svelte';
 	import '../app.pcss';
+	import { pwaInfo } from 'virtual:pwa-info';
+
+	onMount(async () => {
+		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);
+				}
+			});
+		}
+	});
+
+	$: webManifestLink = pwaInfo ? pwaInfo.webManifest.linkTag : '';
 </script>
 
-<main class="bg-white dark:bg-slate-700 min-h-screen">
+<svelte:head>
+	{@html webManifestLink}
+</svelte:head>
+
+<main class="min-h-screen bg-white dark:bg-slate-700">
 	<slot />
 </main>
+
+{#await import('$lib/ReloadPrompt.svelte') then { default: ReloadPrompt }}
+	<ReloadPrompt />
+{/await}

svelte.config.js

@@ -1,17 +1,21 @@
-import adapter from '@sveltejs/adapter-auto';
+import adapter from '@sveltejs/adapter-static';
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
+const isDevEnv = process.env.NODE_ENV === 'development';
+
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
+	// Consult https://github.com/sveltejs/svelte-preprocess
 	// for more information about preprocessors
-	preprocess: [vitePreprocess({})],
+	preprocess: vitePreprocess(),
 
 	kit: {
-		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
-		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
-		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
-		adapter: adapter()
+		adapter: adapter({
+			fallback: '404.html'
+		}),
+		paths: {
+			base: isDevEnv ? '' : '/scratchpad'
+		}
 	}
 };
 

tsconfig.json

@@ -9,8 +9,11 @@
 		"skipLibCheck": true,
 		"sourceMap": true,
 		"strict": true,
-		"moduleResolution": "bundler"
-	}
+		"moduleResolution": "bundler",
+		"types": [
+			"vite-plugin-pwa/client"
+		]
+	},
 	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
 	//
 	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes

vite.config.ts

@@ -1,8 +1,46 @@
 import { sveltekit } from '@sveltejs/kit/vite';
+import { SvelteKitPWA } from '@vite-pwa/sveltekit';
 import { defineConfig } from 'vitest/config';
 
 export default defineConfig({
-	plugins: [sveltekit()],
+	plugins: [
+		sveltekit(),
+		SvelteKitPWA({
+			manifest: {
+				short_name: 'Scratchpad',
+				name: 'Scratchpad',
+				start_url: '/',
+				scope: '/',
+				display: 'standalone',
+				theme_color: '#ffffff',
+				background_color: '#ffffff',
+				icons: [
+					{
+						src: 'pwa-64x64.png',
+						sizes: '64x64',
+						type: 'image/png'
+					},
+					{
+						src: 'pwa-192x192.png',
+						sizes: '192x192',
+						type: 'image/png'
+					},
+					{
+						src: 'pwa-512x512.png',
+						sizes: '512x512',
+						type: 'image/png',
+						purpose: 'any'
+					},
+					{
+						src: 'maskable-icon-512x512.png',
+						sizes: '512x512',
+						type: 'image/png',
+						purpose: 'maskable'
+					}
+				]
+			}
+		})
+	],
 	test: {
 		include: ['src/**/*.{test,spec}.{js,ts}']
 	}