Framework Adapters

Quick Start

The same 3 steps work for any stack:

npx @swoff/cli init
# Edit swoff.config.json to enable features
npx @swoff/cli generate

Step 4 depends on your framework:

Bundler frameworks (React, Vue, Svelte, Astro, Next.js, Remix):

import { initServiceWorker } from "./swoff/client-injector";
initServiceWorker();

No bundler (no-bundler, HTMX):

<script src="/swoff/client-injector.bundle.js"></script>

# 5. Build the service worker (run after your build)
node swoff/sw/generator.mjs

Node.js projects: add to package.json:

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

Framework-specific differences:

• swoff.config.json values — build.swOutput, navigation.mode, fallback, precacheDirs, ignorePatterns
• Adapters — Bundlers get hooks; others use window events or headers