PWA with Svelte: Overview

Two paths to a SvelteKit PWA

SvelteKit ships with first-class service-worker support out of the box — no extra package required. Place a file at src/service-worker.js and SvelteKit automatically bundles and registers it at build time. Inside that file you get the $service-worker virtual module, which exposes the exact list of built assets, static files, and a version string — everything you need to precache your app.

For teams that want Workbox (Google’s caching strategy library) plus automatic manifest generation and a richer update API, the @vite-pwa/sveltekit package wraps Workbox in a Vite plugin that integrates cleanly with SvelteKit’s build pipeline.

Which path should you take?

	Built-in SW (`$service-worker`)	`@vite-pwa/sveltekit`
Extra install	None	`npm i -D @vite-pwa/sveltekit`
Caching strategies	Manual (Cache API)	Workbox (stale-while-revalidate, cache-first, …)
Manifest	Write your own	Generated from plugin config
Update API	Manual `updatefound` / `statechange`	`virtual:pwa-register` with stores
Best for	Learning, small apps	Production apps needing fine-grained control

This module covers both paths in five lessons so you can choose the approach that fits your project.

How the build wires everything together

flowchart LR
  subgraph Build
    SK["SvelteKit build"] --> BF["build/ assets (hashed)"]
    SK --> ST["static/ files"]
    BF --> VER["version string"]
  end
  subgraph ServiceWorker["Service Worker (either path)"]
    VER --> CACHE["CACHE = cache-version"]
    BF --> ASSETS["ASSETS = [...build, ...files]"]
    ASSETS --> PRE["precache on install"]
  end
  subgraph Page
    REG["navigator.serviceWorker.register()"] --> SW["sw.js activated"]
    SW --> INT["intercepts fetch()"]
  end
  Build --> ServiceWorker
  ServiceWorker --> Page

SvelteKit build pipeline → service worker → page

What this module covers

Overview (this page) — the two PWA paths in SvelteKit and when to choose each.
SvelteKit PWA setup — install @vite-pwa/sveltekit, configure SvelteKitPWA() in vite.config.ts, and understand registerType, manifest, and strategies.
The $service-worker module — create src/service-worker.js using only SvelteKit built-ins: build, files, version, and prerendered.
Update flow — detecting a new service worker, prompting the user to reload, and the difference between autoUpdate and prompt registration types.
Svelte-specific patterns — online/offline stores, install-prompt components, and SSR/adapter notes.