Setup guide · Qwik
Turn a Qwik app into an installable PWA (2026)
Qwik City PWA setup — manifest in public/, service worker via QwikCity and install prompt.
Key takeaways
- Drop `manifest.webmanifest` and `sw.js` into `public/`.
- Register from `root.tsx` inside `useVisibleTask$`.
- InstantPWA handles the iOS install flow.
Before you start
- Qwik City 1+
- HTTPS origin
- Two icon sizes
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 Qwik
- Step 1Add files to /public
Create `public/manifest.webmanifest` and `public/sw.js`.
- Step 2Register the SW in root.tsx
import { useVisibleTask$ } from '@builder.io/qwik'; useVisibleTask$(() => { if ('serviceWorker' in navigator) navigator.serviceWorker.register('/sw.js'); }); - Step 3Add the install popup
Include the InstantPWA snippet in `<head>`.
Minimal sw.js
// public/sw.js
self.addEventListener('install', (e) => self.skipWaiting());
self.addEventListener('activate', (e) => self.clients.claim());
self.addEventListener('fetch', () => {});Common Qwik gotchas
- Do not cache `q-*.js` chunks — Qwik generates new hashes on each build.
- Test installability after `npm run preview`, not `npm run dev`.
FAQ
Do I need a native app if my Qwik site is a PWA?
No. Once your Qwik 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 Qwik 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 Qwik 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