Svelte

Swoff works with any Svelte-based project — Svelte + Vite or SvelteKit. The CLI generates stores for your project when you run npx @swoff/cli generate.

Config per flavor

| navigation.mode | "spa" | "ssr" | | navigation.fallback | "/index.html" | "/" | | navigation.preload | true | true |

SvelteKit uses SSR mode because it renders on the server. Set navigation.mode to "ssr" to enable runtime-html caching for server-rendered routes.

Entry point

<script>
  import { onMount } from "svelte";
  import { initServiceWorker } from "$lib/swoff/client-injector";

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

For SvelteKit, call initServiceWorker in +layout.svelte inside onMount.

CLI generation

Run the generator after npx @swoff/cli init:

npx @swoff/cli generate

This creates stores in swoff/adapters/ that map SW events to Svelte's writable stores. The naming follows the useSwoff* convention:

import { useSwoffFetch } from "./swoff/adapters/useSwoffFetch";
import { useSwoffNetwork } from "./swoff/adapters/useSwoffNetwork";

Each function returns Svelte writable stores. Use the $ auto-subscription syntax in components:

<script>
  import { useSwoffNetwork } from "$lib/swoff/adapters/useSwoffNetwork";

  const { online } = useSwoffNetwork();
</script>

{#if !$online}
  <div class="offline-banner">You are offline</div>
{/if}

See the full adapter list (same useSwoff* API applies to all frameworks). All 14 adapters are available for Svelte as writable stores.

Build script

Run the SW generator after your build:

node swoff/sw/generator.mjs

Or add it to package.json:

{
  "scripts": {
    "build": "your-build && node swoff/sw/generator.mjs"
  }
}

SvelteKit outputs to build/ by default. The SW generator reads build.swOutput from config and writes the versioned SW there automatically.

Related

• Service Worker setup
• Caching strategies
• Ecosystem compatibility