Turn a Rails app into an installable PWA (2026)

Key takeaways

• `bin/rails g pwa` scaffolds manifest and sw.js.
• Turbo Drive plays nicely with a passthrough service worker.
• InstantPWA handles iOS Safari, which Rails does not.

Before you start

• Rails 7.1+
• HTTPS origin (Kamal, Fly, Heroku with SSL)

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 Rails

1. Step 1
   Generate the PWA files

   Run `bin/rails g pwa` to scaffold manifest.json and service-worker.js under public/.

2. Step 2
   Link them from application.html.erb

   The generator adds the tags automatically.

3. Step 3
   Add the install popup

   Drop the InstantPWA snippet into your layout head.

Minimal sw.js

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

Common Rails gotchas

• Turbo drives page transitions client-side. Do not cache full HTML in the SW — cache asset URLs only.
• Rails hosts (Heroku, Fly) sometimes gzip .webmanifest. Ensure the Content-Type stays application/manifest+json.

FAQ