Swoff - Build Offline-First Web Apps

Remix

Adapter for Remix in client-side mode. Swoff runs client-only — Remix server features are not used.

Create Project

npx create-remix@latest
cd my-remix-app && npm install

Project Structure

my-remix-app
├── app
│   └── root.tsx
├── swoff
│   ├── sw-template.js
│   ├── sw-generator.js
│   ├── sw-injector.js
│   └── swoff.d.ts
└── package.json

Entry Point (`app/root.tsx`)

import { useEffect } from "react";
import { Outlet } from "@remix-run/react";
import { initServiceWorker } from "../swoff/sw-injector";

export default function App() {
  useEffect(() => {
    initServiceWorker();
  }, []);
  return <Outlet />;
}

Add Patterns

Copy from Patterns:

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

Output Directory

Remix outputs to build/client/ by default. Update your swoff/sw-generator.js:

writeFileSync(join(__dirname, "..", "build", "client", `sw-v${pkg.version}.js`), sw);
writeFileSync(join(__dirname, "..", "build", "client", "version.json"), JSON.stringify({ ... }));

If using a hosting adapter (Vercel, Netlify, Cloudflare), the output directory may differ. Check your adapter's docs.

Update package.json:

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

Build & Test

npm version patch
npm run build

Next Steps

React Hooks — all 9 generated hooks
React Components — UpdatePrompt, SWProgressBar

Remix (React Router)