SvelteKit

SvelteKit

Adapter for SvelteKit with client-only rendering. Swoff runs client-only — SvelteKit server features are not used.

Create Project

npm create svelte@latest my-app
cd my-app && npm install

Configure Client-Only

// svelte.config.js
const config = {
  kit: {
    adapter: adapter({ fallback: "index.html" }), // SPA mode
  },
};

Entry Point (src/routes/+layout.svelte)

<script>
import { onMount } from 'svelte'
import { initServiceWorker } from '../../swoff/sw-injector'

onMount(() => { initServiceWorker() })
</script>

<slot />

Add Patterns

Copy from Patterns:

1. SW Template → swoff/sw-template.js
2. Build Script → swoff/sw-generator.js
3. Client Registration → swoff/sw-injector.js
4. TypeScript Declarations → swoff/swoff.d.ts

Output Directory

SvelteKit's output directory depends on your adapter:

Update your swoff/sw-generator.js to write to the correct output directory for your deployment target.

Update package.json:

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

Build & Test

npm version patch
npm run build

Next Steps

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