Turn a Django app into an installable PWA (2026)

Key takeaways

• Serve `sw.js` from the origin root via a Django URL pattern, not `/static/`.
• Link the manifest from your base template with `{% static %}`.
• InstantPWA handles the iOS install flow.

Before you start

• Django 4+
• HTTPS origin
• WhiteNoise or S3 for statics

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 Django

1. Step 1
   Add the files

   Create `static/manifest.webmanifest` and `static/sw.js`.

2. Step 2
   Serve sw.js from the root

   Add a URL that returns the SW with the correct Content-Type.

   # urls.py
   from django.views.static import serve
   from django.urls import path
   from django.conf import settings
   urlpatterns += [path('sw.js', serve, {'document_root': settings.STATIC_ROOT, 'path': 'sw.js'})]

3. Step 3
   Link + register

   Update `base.html` to link the manifest and register `/sw.js`.

4. Step 4
   Add the install popup

   Paste the InstantPWA snippet before `</head>`.

Minimal sw.js

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

Common Django gotchas

• Run `collectstatic` after editing the SW or the file will 404 in production.
• Set `SECURE_SSL_REDIRECT = True` — Chrome refuses to install without HTTPS.

FAQ