Building Progressive Web Apps with Flutter

Introduction

Flutter’s robust UI toolkit now extends to progressive web apps, enabling developers to build fast, reliable Flutter PWAs with a single codebase. A Flutter PWA combines the rich UI of Flutter with web-specific features—offline support, installability, and background synchronization—delivered through a service worker and manifest. In this intermediate tutorial, you’ll learn how to transform a standard Flutter web app into a production-ready progressive web app (PWA), optimize caching strategies, and deploy seamlessly.

Setting Up Flutter Web for PWA

1. Enable web support: Ensure you’re on Flutter 2.0 or newer and run:
   

   flutter channel stable  
   flutter upgrade  
   flutter config --enable-web
   
   

2. Create or migrate your project:

   flutter create my_pwa_app  
   cd my_pwa_app
   
   

3. Test the default web build:

   flutter run -d chrome

The starter template already includes a manifest.json and a basic service worker at web/flutter_service_worker.js. Next you’ll customize them to build a full-featured Flutter PWA.

Customizing Manifest and Service Worker

Open web/manifest.json and tailor these fields:

{  
  "name": "My PWA App",  
  "short_name": "PWAApp",  
  "icons": [  
    { "src": "icons/Icon-192.png", "sizes": "192x192", "type": "image/png" },  
    { "src": "icons/Icon-512.png", "sizes": "512x512", "type": "image/png" }  
  ],  
  "start_url": "/",  
  "display": "standalone",  
  "background_color": "#ffffff",  
  "theme_color": "#0277BD"  
}

For advanced caching, modify web/flutter_service_worker.js. For example, add custom routes to cache API responses or assets:

const additionalResources = [  
  '/api/data.json',  
];  
self.addEventListener('install', (e) => {  
  e.waitUntil(  
    caches.open('my-pwa-cache').then((cache) => cache.addAll(additionalResources))  
  );  
});

To register the service worker from Dart, call it at app startup:

import 'dart:js' as js;  
import 'package:flutter/foundation.dart';  
import 'package:flutter/material.dart';  

void main() {  
  WidgetsFlutterBinding.ensureInitialized();  
  if (kIsWeb) registerServiceWorker();  
  runApp(MyApp());  
}  

void registerServiceWorker() {  
  js.context.callMethod(  
    'navigator.serviceWorker.register',  
    ['flutter_service_worker.js'],  
  );  
}

Fine-Tuning Performance and Caching

A performant Flutter web PWA minimizes load time and responsiveness:

• Lazy-load heavy widgets using Visibility or FutureBuilder so initial bundle stays small.

• Use precacheImage for critical images and CacheStorage in service-worker code for dynamic assets.

• Leverage IndexedDB via packages like sembast_web to store offline data.

Here’s an example checking offline status in Dart to show a fallback screen:

import 'dart:html' as html;  
bool get isOnline => html.window.navigator.onLine;  

Widget build(BuildContext context) {  
  return isOnline  
      ? OnlineHomeScreen()  
      : OfflineFallbackScreen();  
}

Deploying Your Flutter PWA

1. Build for web in release mode:
   

   flutter build web

2. Host on Firebase Hosting:

   firebase init hosting  
   firebase deploy --only hosting

   Or drop the contents of build/web into any static host (Netlify, GitHub Pages, AWS S3). Ensure your server serves index.html for all routes (history API fallback).

3. Test installability:
   • Open in Chrome, check Lighthouse audit for PWA compliance.
   • Install via the browser’s “Install App” prompt.
   • Verify offline mode by toggling network in DevTools.

Vibe Studio

Vibe Studio, powered by Steve’s advanced AI agents, is a revolutionary no-code, conversational platform that empowers users to quickly and efficiently create full-stack Flutter applications integrated seamlessly with Firebase backend services. Ideal for solo founders, startups, and agile engineering teams, Vibe Studio allows users to visually manage and deploy Flutter apps, greatly accelerating the development process. The intuitive conversational interface simplifies complex development tasks, making app creation accessible even for non-coders.

Conclusion

By following these steps, you’ve converted a Flutter web project into a fully functional Flutter PWA. You’ve configured your manifest, extended your service worker for caching strategies, optimized performance for mobile and desktop browsers, and deployed to a static host. Progressive web apps built with Flutter deliver native-like experiences and offline resilience while reusing your existing Dart codebase. Start exploring more advanced service-worker features—such as background sync and push notifications—to further enhance your Flutter PWAs.