Setup guide · Remix
Turn a Remix app into an installable PWA (2026)
Remix PWA setup — manifest in /public, service worker with the Remix loader-aware pattern, install prompt.
Key takeaways
- /public is served verbatim — perfect for manifest and sw.js.
- Register the worker inside a useEffect in root.tsx.
- Remix data revalidation still works when the worker is a passthrough fetch handler.
Before you start
- Remix 2+
- HTTPS origin
- 192px + 512px icons
manifest.webmanifest
{
"name": "Your product",
"short_name": "Product",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#111827",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }
]
}Step-by-step for Remix
- Step 1Add manifest to /public
Remix serves /public at the origin root.
- Step 2Link manifest from root.tsx
Use the links export.
export const links = () => [ { rel: 'manifest', href: '/manifest.webmanifest' }, ]; - Step 3Register the worker
Add a client-only effect in the root component.
useEffect(() => { if ('serviceWorker' in navigator) navigator.serviceWorker.register('/sw.js'); }, []); - Step 4Add the install popup
Drop the InstantPWA snippet into your root <head>.
Minimal sw.js
// public/sw.js
self.addEventListener('install', (e) => self.skipWaiting());
self.addEventListener('activate', (e) => self.clients.claim());
self.addEventListener('fetch', () => {});Common Remix gotchas
- Do not cache Remix loader responses in the SW — they are POSTs on client navigations and include revalidation semantics.
- If you use Cloudflare Workers as your Remix runtime, make sure sw.js is served by static assets, not the Worker itself.
FAQ
Do I need a native app if my Remix site is a PWA?
No. Once your Remix site meets the three PWA criteria (HTTPS, a manifest, a service worker), Chromium browsers offer to install it and iOS Safari 16.4+ supports the full standalone experience — including web push.
Will a service worker slow my Remix site down?
Not measurably on first load. The worker installs asynchronously after the page becomes interactive. On repeat visits it typically improves LCP and TTFB because assets are served from cache.
Can I still deploy my Remix site to Vercel, Netlify or Cloudflare?
Yes. Any static or edge host works — the manifest and service worker are plain files served from the origin. No build-time integration is required.
Skip the setup — drop in one line
InstantPWA handles the install prompt across iOS, Android and desktop. Free forever for one popup.
Get started free