Setup guide · SvelteKit
Turn a SvelteKit app into an installable PWA (2026)
SvelteKit PWA setup with manifest, service worker via the built-in $service-worker module and install prompt.
Key takeaways
- Create src/service-worker.ts — SvelteKit builds and registers it automatically.
- Serve manifest.webmanifest from /static.
- iOS install needs a manual share-sheet card; SvelteKit does not provide one.
- A hosted popup avoids Svelte-specific UI state.
Before you start
- SvelteKit 1.20+
- HTTPS origin
- 192px + 512px icons
manifest.webmanifest
{
"name": "Your product",
"short_name": "Product",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#111827",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }
]
}Step-by-step for SvelteKit
- Step 1Add manifest to /static
Drop manifest.webmanifest inside /static — SvelteKit serves the folder at /.
- Step 2Add the built-in service worker
Create src/service-worker.ts. SvelteKit generates a versioned build ID and registers the worker for you.
// src/service-worker.ts /// <reference types="@sveltejs/kit" /> import { build, files, version } from '$service-worker'; const CACHE = 'app-' + version; self.addEventListener('install', (e) => e.waitUntil(caches.open(CACHE).then(c => c.addAll([...build, ...files])))); - Step 3Link manifest from app.html
Add the manifest and theme-color tags to src/app.html.
<link rel="manifest" href="/manifest.webmanifest" /> <meta name="theme-color" content="#111827" /> - Step 4Add the install popup
Drop the InstantPWA script into app.html <head> to get iOS + Android + desktop prompts.
<script src="https://instantpwa.com/api/public/embed.js?id=YOUR_ID" async></script>
Minimal sw.js
// public/sw.js
self.addEventListener('install', (e) => self.skipWaiting());
self.addEventListener('activate', (e) => self.clients.claim());
self.addEventListener('fetch', () => {});Common SvelteKit gotchas
- Set kit.serviceWorker.register to false only if you register manually — otherwise you get two registrations.
- During dev, SvelteKit skips the service worker. Test install on a preview build (`vite build && vite preview`).
FAQ
Do I need a native app if my SvelteKit site is a PWA?
No. Once your SvelteKit site meets the three PWA criteria (HTTPS, a manifest, a service worker), Chromium browsers offer to install it and iOS Safari 16.4+ supports the full standalone experience — including web push.
Will a service worker slow my SvelteKit site down?
Not measurably on first load. The worker installs asynchronously after the page becomes interactive. On repeat visits it typically improves LCP and TTFB because assets are served from cache.
Can I still deploy my SvelteKit site to Vercel, Netlify or Cloudflare?
Yes. Any static or edge host works — the manifest and service worker are plain files served from the origin. No build-time integration is required.
Skip the setup — drop in one line
InstantPWA handles the install prompt across iOS, Android and desktop. Free forever for one popup.
Get started free