How do you turn a Flutter Web app into a Progressive Web App (PWA)?
TL;DR: Flutter Web is a PWA by default — it generates manifest.json and a service worker. Customize manifest for icons, theme color, display mode. Enhance the service worker for offline caching. Add beforeinstallprompt listener via dart:js_interop for a custom install button.
Full Answer
Flutter Web apps automatically generate a web app manifest and a service worker (flutter_service_worker.js). This meets the basic PWA install requirements.
PWA Checklist
- ▸manifest.json: name, short_name, icons (192px + 512px maskable), start_url, display: standalone
- ▸Service worker: flutter_service_worker.js caches app shell automatically
- ▸HTTPS: required for PWA install (localhost is exempt in dev)
- ▸Offline fallback: Flutter service worker caches app bundle by default
- ▸Install prompt: listen to beforeinstallprompt JS event
Test PWA installability: Chrome DevTools → Application → Manifest. Run Lighthouse PWA audit for a comprehensive check.
Code Examples
// maskable icon: required for Android adaptive icons // screenshots: shown in app stores and install dialogs // display: standalone hides browser UI after install
Common Mistakes
- ✗Not providing a maskable icon — Android adaptive icons crop non-maskable icons badly
- ✗Serving over HTTP in production — PWA install requires HTTPS
Interview Tip
flutter build web auto-generates the service worker and manifest. Show you know how to customize them and why maskable icons matter for Android. The no-cache header on flutter_service_worker.js is a critical gotcha.