pwa

PWA Installability

Make a web app installable and iOS-friendly with a minimal service worker. Default posture is network-only (no caching) unless the app needs offline — pick a strategy deliberately, never by default.

When to Use

• "Make it installable / a PWA"
• "Add a service worker" / "add a web manifest" / "add to home screen"
• "Works offline?" or "works on iPhone?"

The Three Pillars

1. HTTPS — required for service workers (localhost exempt in dev).
2. Web app manifest — name, icons, start_url, display → makes it installable.
3. Service worker — background script; active SW + valid manifest unlocks the install prompt.

Quick Reference

Asset	Where it goes	Notes
manifest.webmanifest	site root (static/ for SvelteKit)	name, short_name, start_url, scope, display standalone, theme/background color, icons 192+512 + maskable
favicon-32/48/64.png	root	browser tab icons; also apple-touch-icon.png 180px for iOS
icon-192.png, icon-512.png	root	required by Chrome for install
icon-maskable-512.png	root	full-bleed background, content in center 80% safe zone
sw.js	root (static/ for SvelteKit)	register from client code; served at site root for correct scope
offline.html (optional)	root	fallback for failed navigations if offline support is wanted

Service Worker

Default: network-only (no caching)

self.addEventListener('install', () => {
	self.skipWaiting();
});

self.addEventListener('activate', (event) => {
	event.waitUntil(clients.claim());
});

self.addEventListener('fetch', (event) => {
	event.respondWith(fetch(event.request));
});

This makes the app installable and always-fresh. Use for apps where data lives server-side / in a spreadsheet and serving stale data is wrong.

Offline fallback (add only if offline support is requested)

const CACHE = 'capstone-v1';

self.addEventListener('install', (event) => {
	event.waitUntil(
		caches.open(CACHE).then((c) => c.addAll(['/', '/offline.html', '/manifest.webmanifest', '/icon-192.png', '/icon-512.png']))
	);
	self.skipWaiting();
});

self.addEventListener('activate', (event) => {
	event.waitUntil(
		caches.keys().then((keys) => Promise.all(keys.filter((k) => k !== CACHE).map((k) => caches.delete(k)))).then(() => clients.claim())
	);
});

self.addEventListener('fetch', (event) => {
	const url = new URL(event.request.url);
	if (event.request.mode === 'navigate') {
		event.respondWith(fetch(event.request).catch(() => caches.match('/offline.html')));
		return;
	}
	if (url.origin === location.origin && ['css', 'js', 'svg', 'png', 'jpg', 'woff2'].some((ext) => url.pathname.endsWith('.' + ext))) {
		event.respondWith(caches.match(event.request).then((cached) => cached || fetch(event.request).then((res) => { const clone = res.clone(); caches.open(CACHE).then((c) => c.put(event.request, clone)); return res; })));
		return;
	}
	event.respondWith(fetch(event.request));
});