feat: enable PWA offline support with service worker

Add SvelteKitPWA plugin to generate a service worker that precaches
static assets and uses NetworkFirst for API routes, enabling the app
to load offline. Generate pretzel emoji PWA icons and remove the old
static manifest (now generated by the plugin).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Frederic Cabassut
2026-03-06 00:03:34 +01:00
co-authored by Claude Opus 4.6
parent cc92652358
commit 4fcb21d191
5 changed files with 37 additions and 29 deletions
+36 -1
View File
@@ -1,7 +1,42 @@
import { sveltekit } from '@sveltejs/kit/vite';
import { SvelteKitPWA } from '@vite-pwa/sveltekit';
import tailwindcss from '@tailwindcss/vite';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [tailwindcss(), sveltekit()]
plugins: [
tailwindcss(),
sveltekit(),
SvelteKitPWA({
registerType: 'autoUpdate',
manifest: {
name: 'Crumbs by Bretzel',
short_name: 'Crumbs',
description: 'A self-hostable, offline-first note-taking app by Bretzel',
start_url: '/',
display: 'standalone',
background_color: '#202124',
theme_color: '#f59e0b',
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' }
]
},
workbox: {
globPatterns: ['client/**/*.{js,css,ico,png,svg,webp,woff,woff2}'],
navigateFallback: '/',
runtimeCaching: [
{
urlPattern: /^https?:\/\/.*\/api\//,
handler: 'NetworkFirst',
options: {
cacheName: 'api-cache',
expiration: { maxEntries: 50, maxAgeSeconds: 300 }
}
}
]
}
})
]
});