Turn a SolidJS app into an installable PWA (2026)

Key takeaways

• `vite-plugin-pwa` auto-generates manifest and Workbox SW.
• SolidStart supports the same plugin — no adapter changes needed.
• Add InstantPWA for cross-platform install UI.

Before you start

• Vite 5+
• HTTPS origin
• 512px icon

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 SolidJS

1. Step 1
   Install the plugin

   Run `npm i -D vite-plugin-pwa`.

2. Step 2
   Enable it in vite.config.ts

   import { VitePWA } from 'vite-plugin-pwa';
   export default { plugins: [VitePWA({ registerType: 'autoUpdate', manifest: { name: 'Your app', short_name: 'App', display: 'standalone', icons: [{ src: '/icon-512.png', sizes: '512x512', type: 'image/png' }] } })] };

3. Step 3
   Drop in the install popup

   Paste the InstantPWA snippet into `index.html`.

Minimal sw.js

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

Common SolidJS gotchas

• Hot reload does not run the SW — test installability with `vite preview`.
• Use `registerType: autoUpdate` so users get new versions without refreshing.

FAQ