Turn a Webflow site into an installable PWA (2026)

Key takeaways

• Host manifest.webmanifest and sw.js on a CDN or external subdomain.
• Wire them up via Site Settings → Custom Code.
• The install popup can be added by pasting one script tag — no Webflow interactions required.

Before you start

• Webflow Site plan (custom code)
• A CDN or subdomain that serves manifest + sw.js
• HTTPS

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 Webflow

1. Step 1
   Host manifest + sw.js on your domain

   Webflow does not serve arbitrary files. Use Cloudflare Pages, Netlify or your existing CDN under the same origin as your Webflow site (via reverse proxy).

2. Step 2
   Paste head code

   Site Settings → Custom Code → Head Code.

   <link rel="manifest" href="/manifest.webmanifest" />
   <meta name="theme-color" content="#111827" />
   <script>if('serviceWorker' in navigator) navigator.serviceWorker.register('/sw.js');</script>

3. Step 3
   Add the install popup

   Below the register script, paste the InstantPWA embed.

Minimal sw.js

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

Common Webflow gotchas

• The service worker must be same-origin. A different subdomain will register but browsers will not prompt for install.
• Webflow custom code has a 10,000 character limit per section.

FAQ