Swoff - Build Offline-First Web Apps

Svelte + Vite

Concise adapter for Svelte 5 + Vite projects.

Create Project

npm create vite@latest my-app -- --template svelte-ts
cd my-app && npm install

Project Structure

my-app
├── src
│   └── main.ts
├── swoff
│   ├── sw-template.js
│   ├── sw-generator.js
│   ├── sw-injector.js
│   └── swoff.d.ts
└── package.json

Entry Point (`src/main.ts`)

import App from "./App.svelte";
import { initServiceWorker } from "../swoff/sw-injector";

initServiceWorker();

const app = new App({
  target: document.getElementById("app"),
});

export default app;

Add Patterns

Copy from Patterns:

SW Template → swoff/sw-template.js
Build Script → swoff/sw-generator.js (output dir: dist/)
Client Registration → swoff/sw-injector.js
TypeScript Declarations → swoff/swoff.d.ts

Update package.json:

{
  "scripts": {
    "build": "vite build && node swoff/sw-generator.js"
  }
}

Output Directory

Vite outputs to dist/ by default. Your swoff/sw-generator.js should write to dist/.

Build & Test

npm version patch
npm run build

Next Steps

Svelte Stores — pwaUpdate, swProgress
Svelte Components — UpdatePrompt, SWProgressBar

Svelte + Vite

On this page