Flutter Web and PWA Support: Deployment Guide

Flutter compiles to a web bundle you can host anywhere, and with the right files it becomes an installable PWA. This follows the cited web deployment guide: the pieces are the app manifest, the service worker, and a handful of build flags.

Serving the build

flutter build web emits build/web/: index.html, main.dart.js, assets, and the service worker files. Serve that directory over HTTPS (required for service workers and installability) from any static host — Firebase Hosting, Netlify, nginx, or a CDN.

The app manifest

manifest.json (generated under web/) makes the app installable: name, short name, icons (192px and 512px), start_url, display: standalone, and theme colors. Customize the icons and colors in web/manifest.json so the installed app looks native.

Service worker and precaching

The build generates a service worker (flutter_service_worker.js) plus a precache_manifest.json listing every hashed asset. The service worker:

1. Serves cached assets when the network is slow or offline.
2. Fetches the precache manifest at install time and caches those files.
3. Uses the hash-based filenames to invalidate old caches on redeploy.

After a deploy, returning users pick up the new main.dart.js because the index.html references the new hashes. For aggressive cache busting, Flutter 3.50+ supports --web-content-hash to embed content hashes directly.

Wasm builds

flutter build web --wasm

WebAssembly compilation produces smaller, faster initial loads on supported browsers, with an automatic JS fallback where Wasm isn’t available.

COOP/COEP headers

Wasm and some newer browser features require cross-origin isolation. The deployment guide specifies setting these headers on your host:

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

Set them only if you ship a Wasm build — require-corp can block cross-origin resources that don’t send the right headers, so test maps, fonts, and analytics after enabling.

Routing and deep links

Configure your host to rewrite unknown paths to index.html (SPA routing), so refreshes on /posts/some-slug don’t 404. Flutter’s web router then handles the path client-side.

Takeaway: Flutter web becomes an installable PWA with manifest.json + the generated service worker and precache manifest — host over HTTPS, add SPA rewrites, and set COOP/COEP headers when building with --wasm for cross-origin isolation.