Turn a React (Vite) app into an installable PWA (2026)

Key takeaways

• vite-plugin-pwa generates manifest and service worker at build time.
• For hand-rolled setups, /public is served at the origin root.
• React 18 strict mode double-invokes effects — guard your SW register.

Before you start

• Vite 4+
• React 18+
• HTTPS origin

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 React (Vite)

1. Step 1
   Install vite-plugin-pwa

   Run `npm i -D vite-plugin-pwa` and add it to plugins in vite.config.ts.

2. Step 2
   Configure the manifest

   The plugin accepts the manifest inline and writes it at build time.

   VitePWA({ registerType: 'autoUpdate', manifest: { name: 'Your product', theme_color: '#111827' } })

3. Step 3
   Add the install popup

   Paste the InstantPWA embed into index.html to skip writing prompt UI.

Minimal sw.js

// public/sw.js
self.addEventListener('install', (e) => self.skipWaiting());
self.addEventListener('activate', (e) => self.clients.claim());
self.addEventListener('fetch', () => {});

Common React (Vite) gotchas

• React strict mode calls useEffect twice — always check for an existing registration before calling register.
• HMR does not reload the service worker. After changing sw.js, do a full reload.

FAQ