chore: bump version to 0.21.8

SvelteKit sets Vite's base to './' for client builds, causing the PWA
plugin to generate relative SW paths (./sw.js). On sub-routes like
/settings or /tag/foo, this resolves to /settings/sw.js which returns
HTML, breaking SW registration. Force scope and buildBase to '/'.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

docker-compose.yml

@@ -1,6 +1,6 @@
 services:
   crumbs:
-    image: ghcr.io/bretzel-app/crumbs:0.21.2
+    image: ghcr.io/bretzel-app/crumbs:0.21.7
     container_name: crumbs
     ports:
       - "3000:3000"

package.json

@@ -1,7 +1,7 @@
 {
   "name": "crumbs",
   "private": true,
-  "version": "0.21.3",
+  "version": "0.21.8",
   "type": "module",
   "license": "MIT",
   "author": "Bretzel (https://bretzel.app)",
@@ -84,7 +84,9 @@
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
     "vite-plugin-istanbul": "^7.2.1",
+    "vite-plugin-pwa": "^1.2.0",
     "vitest": "^3.2.4",
+    "workbox-window": "^7.4.0",
     "yaml": "^2.8.2"
   },
   "pnpm": {

playwright.config.ts

@@ -11,7 +11,8 @@ export default defineConfig({
 	use: {
 		baseURL: 'http://localhost:4173',
 		trace: 'on-first-retry',
-		screenshot: 'only-on-failure'
+		screenshot: 'only-on-failure',
+		serviceWorkers: 'block'
 	},
 	projects: [
 		{

pnpm-lock.yaml

@@ -165,9 +165,15 @@ importers:
       vite-plugin-istanbul:
         specifier: ^7.2.1
         version: 7.2.1(vite@7.3.1(@types/node@25.3.5)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))
+      vite-plugin-pwa:
+        specifier: ^1.2.0
+        version: 1.2.0(vite@7.3.1(@types/node@25.3.5)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))(workbox-build@7.4.0)(workbox-window@7.4.0)
       vitest:
         specifier: ^3.2.4
         version: 3.2.4(@types/node@25.3.5)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
+      workbox-window:
+        specifier: ^7.4.0
+        version: 7.4.0
       yaml:
         specifier: ^2.8.2
         version: 2.8.2

src/app.d.ts

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

src/routes/+layout.svelte

@@ -1,7 +1,30 @@
 <script lang="ts">
 	import '../app.css';
+	import { onMount } from 'svelte';
+	import { pwaInfo } from 'virtual:pwa-info';
 
 	let { children } = $props();
+
+	onMount(async () => {
+		if (pwaInfo) {
+			const { registerSW } = await import('virtual:pwa-register');
+			registerSW({
+				immediate: true,
+				onRegistered(r: ServiceWorkerRegistration | undefined) {
+					console.log('SW Registered:', r);
+				},
+				onRegisterError(error: Error) {
+					console.log('SW registration error', error);
+				}
+			});
+		}
+	});
+
+	const webManifest = $derived(pwaInfo ? pwaInfo.webManifest.linkTag : '');
 </script>
 
+<svelte:head>
+	{@html webManifest}
+</svelte:head>
+
 {@render children()}

svelte.config.js

@@ -5,7 +5,10 @@ const config = {
 	kit: {
 		adapter: adapter({
 			out: 'build'
-		})
+		}),
+		serviceWorker: {
+			register: false
+		}
 	}
 };
 

vite.config.ts

@@ -23,6 +23,8 @@ export default defineConfig({
 				]
 			: []),
 		SvelteKitPWA({
+			scope: '/',
+			buildBase: '/',
 			registerType: 'autoUpdate',
 			manifest: {
 				name: 'Crumbs by Bretzel',
@@ -34,8 +36,7 @@ export default defineConfig({
 				theme_color: '#C8860A',
 				icons: [
 					{ src: 'pwa-192x192.png', sizes: '192x192', type: 'image/png' },
-					{ src: 'pwa-512x512.png', sizes: '512x512', type: 'image/png' },
-					{ src: 'pwa-512x512.png', sizes: '512x512', type: 'image/png', purpose: 'maskable' }
+					{ src: 'pwa-512x512.png', sizes: '512x512', type: 'image/png' }
 				]
 			},
 			workbox: {
@@ -52,7 +53,9 @@ export default defineConfig({
 						}
 					},
 					{
-						urlPattern: /\/api\/notes\/.*\/attachments\?attachmentId=/,
+						urlPattern: ({ request, url }) =>
+							request.method === 'GET' &&
+							/\/api\/notes\/.*\/attachments\?attachmentId=/.test(url.href),
 						handler: 'CacheFirst',
 						options: {
 							cacheName: 'attachment-cache',
@@ -60,7 +63,8 @@ export default defineConfig({
 						}
 					},
 					{
-						urlPattern: /^https?:\/\/.*\/api\//,
+						urlPattern: ({ request, url }) =>
+							request.method === 'GET' && /\/api\//.test(url.pathname),
 						handler: 'NetworkFirst',
 						options: {
 							cacheName: 'api-cache',

website/index.html

@@ -280,7 +280,7 @@
 				<li><a href="https://github.com/bretzel-app/crumbs/blob/main/docs/DEPLOYMENT.md" target="_blank" rel="noopener">Docs</a></li>
 				<li><a href="https://github.com/bretzel-app/crumbs/blob/main/LICENSE" target="_blank" rel="noopener">License</a></li>
 			</ul>
-			<span class="footer-version">v0.21.3</span>
+			<span class="footer-version">v0.21.8</span>
 		</div>
 	</footer>