Building Progressive Web Apps with Flutter: Bridging the Gap Between Web and Mobile

A Flutter PWA is one app that opens in a browser, installs on a phone, and keeps working when the network drops. If you already know Flutter, you are most of the way there. Flutter web builds the app, and a few extra files turn it into a Flutter progressive web app.

This guide shows how to build a PWA with Flutter from scratch. You will:

• Set up a project and add a manifest.
• Understand the service worker.
• Handle offline storage and push notifications.
• Deploy to Firebase.

It also covers the limits, including search visibility, so you can decide if it fits your project.

What is a Progressive Web App?

A progressive web app (PWA) is a website that behaves like a mobile app. It is built with normal web technology, but users can install it, open it in its own window, and use parts of it without internet.

What makes an app “progressive”?

• Installable: users can add it to their home screen or desktop.
• Works offline: a service worker saves key files so the app can open without a network.
• Fast: saved files load quickly on repeat visits.
• Secure: it must be served over HTTPS.
• No app store: users open a link and start.

PWA vs a normal website

A normal website needs a connection every time. A PWA keeps its own saved copy, can be installed, and can send notifications. That makes it a good fit for tools people use often, such as dashboards, booking apps and customer portals.

Why Choose Flutter for Progressive Web Apps?

One codebase for web and mobile

With Flutter, you write the app once and run it on the web, Android, iOS and desktop. Your team keeps one set of screens and one set of logic, so fixes and new features ship faster.

Is Flutter good for a PWA?

It depends on what you are building.

Good fit:

• Dashboards and admin panels
• Customer portals and booking tools
• Apps where users log in first
• Products that also need a mobile app

Weak fit:

• Blogs and marketing sites that depend on search traffic
• Pages that must load very fast on slow connections

Flutter web is stable and production-ready. The trade-off is a larger first download and weaker search visibility, covered below.

Full control of the design

Flutter draws every pixel itself. Your PWA looks the same on every browser and screen, and you can build custom layouts without fighting browser differences.

Setting Up Flutter for PWA Development

Install Flutter and check web support

Install the Flutter SDK from flutter.dev, then run:

flutter doctor
flutter devices

You should see Chrome in the device list. On current Flutter versions, web support is on by default, so you do not need to switch it on.

Create your project

flutter create flutter_pwa_project
cd flutter_pwa_project

Flutter already creates a web/ folder with the files a PWA needs.

Run it in Chrome

flutter run -d chrome

This gives you a quick preview. Note that the offline features only work in a release build, which you will make later.

Adding Progressive Features to Your Flutter App

Here is a simple Flutter PWA example. You only need to edit two files in the web/ folder.

Edit index.html

Open web/index.html and update the <head>. Leave Flutter’s own script tag at the end of the body untouched.

html

<head>
  <base href="$FLUTTER_BASE_HREF">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Flutter PWA</title>
  <meta name="description" content="A short, clear description of your app.">
  <meta name="theme-color" content="#42a5f5">
  <link rel="manifest" href="manifest.json">
  <link rel="icon" type="image/png" href="favicon.png">
</head>

The title and description matter for search and for how your app looks when shared.

Add the web app manifest

The web app manifest tells the browser your app’s name, icons and colours. For a Flutter web manifest.json, open web/manifest.json and edit it like this:

json

{
  "name": "Flutter PWA Example",
  "short_name": "FlutterPWA",
  "description": "A progressive web app built with Flutter.",
  "start_url": ".",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#42a5f5",
  "icons": [
    { "src": "icons/Icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "icons/Icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Replace the icons in web/icons/ with your own, using the same file names and sizes.

Understand the Flutter service worker

Do not write your own. Flutter creates a service worker called flutter_service_worker.js every time you run flutter build web, and it registers it for you. This is the file behind service worker caching: it saves your app’s files in the browser so the next visit loads fast, even offline.

Things to know:

• It only runs in release builds, not in flutter run.
• It needs HTTPS, or localhost when testing.
• After you deploy an update, users may see the old version until they reload.
• You only need a custom service worker for special jobs, such as push notifications (covered below).

Make your Flutter PWA installable

A browser offers the install option when your app has a valid manifest, a service worker, and HTTPS.

• Chrome, Edge (desktop and Android): an install icon appears in the address bar or menu.
• iPhone (Safari): tap Share, then “Add to Home Screen”.

Once installed, it opens in its own window like an app.

Enhancing Your PWA with Flutter

Flutter web responsive design

One screen has to work on a phone and a wide monitor. LayoutBuilder lets you change the layout based on the space available.

dart

import 'package:flutter/material.dart';

class ResponsivePage extends StatelessWidget {
  const ResponsivePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('My Flutter PWA')),
      body: LayoutBuilder(
        builder: (context, constraints) {
          final columns = constraints.maxWidth > 600 ? 3 : 1;
          return GridView.count(
            crossAxisCount: columns,
            children: List.generate(
              6,
              (i) => Card(child: Center(child: Text('Item ${i + 1}'))),
            ),
          );
        },
      ),
    );
  }
}

Use MediaQuery when you need the full screen size instead of the space around one widget.

Flutter PWA offline storage with Hive

Cached files let the app open offline. To keep user data offline too, store it on the device. Hive is a good choice, and on the web it saves data in the browser’s own storage.

flutter pub add hive_flutter

dart

import 'package:flutter/material.dart';
import 'package:hive_flutter/hive_flutter.dart';

Future<void> main() async {
  await Hive.initFlutter();
  final box = await Hive.openBox('settings');
  await box.put('isDarkMode', true);
  runApp(const MyApp());
}

For a real offline-first app, save data locally first, then sync with your server when the connection returns. For a few small settings, shared_preferences also works on the web.

Flutter PWA push notifications with Firebase

Push notifications do work on the web. Many guides say they don’t, which is wrong. You use Firebase Cloud Messaging with a small service worker file.

What you need:

• The firebase_messaging package.
• A file named firebase-messaging-sw.js in your web/ folder.
• A web push key (called a VAPID key) from the Firebase console.
• HTTPS.

dart

final messaging = FirebaseMessaging.instance;
await messaging.requestPermission();
final token = await messaging.getToken(vapidKey: 'YOUR_VAPID_KEY');

On iPhone, web push only works after the user adds the app to the home screen.

Flutter web SEO: what you can and cannot do

Flutter web draws the page on a canvas instead of normal text on the page. Search engines may see very little of your content. This is the biggest weakness of a Flutter PWA.

What helps:

• Write a unique title and description in index.html.
• Use clean URLs with usePathUrlStrategy() instead of # URLs.
• Put your public pages (home, pricing, blog) on a normal website and link to the app.
• Keep the app for logged-in features, where search does not matter.

If most of your traffic must come from search, do not build the whole product in Flutter web.

Deploying Your Flutter PWA

Build a release version

flutter build web --release

The output goes to build/web. This build includes the service worker.

How to deploy a Flutter PWA to Firebase

Firebase Hosting gives you HTTPS by default, which a PWA needs.

npm install -g firebase-tools
firebase login
firebase init hosting

When asked:

• Set the public directory to build/web.
• Choose yes for single-page app.

Then deploy:

firebase deploy

Test before you share it

Open your live link in Chrome, press F12, then open Lighthouse and run the PWA check. In the Application tab, you can switch to “Offline” and reload to confirm your Flutter PWA offline mode works.

FAQs

Q. How do I build a PWA with Flutter?

A. Create a Flutter project, edit web/index.html and web/manifest.json, build with flutter build web --release, and host it over HTTPS. Flutter generates the service worker for you.

Q. How do I convert a Flutter app to a PWA?

A. If your app already runs on mobile, add web support with flutter create . --platforms web in the project folder. Then update the manifest and icons and check that your packages work on the web. Some plugins only support mobile.

Q. Can a Flutter PWA work offline?

A. Yes. The generated service worker saves your app files, and a local database like Hive saves your data. Test it with a release build.

Q. Does a Flutter PWA support push notifications?

A. Yes, through Firebase Cloud Messaging and a service worker file. iPhone users must install the app to the home screen first.

Q. What are the limitations of a Flutter PWA?

• Weak search visibility.
• A larger first download than a normal website.
• Less access to phone features than a native app.
• Some packages do not work on the web.
• Users may need a reload to get updates.

Q. Is Flutter good for PWA development?

A. Yes, for app-like products such as portals, dashboards and tools. It is a poor choice for content sites that rely on search traffic.

Q. Flutter PWA vs native app: which should I pick?

• Pick a PWA if you want fast reach, no app store, and one team.
• Pick a native app if you need deep phone features, such as Bluetooth, background tasks, or the best performance.
• Pick both, since Flutter lets you share most of the code.

Conclusion

Building Progressive Web Apps with Flutter empowers developers to create scalable, high-performance applications that bridge the gap between web and mobile platforms. With Flutter’s robust framework, you can deliver a seamless user experience, harnessing the best features of both worlds.

By following this guide, you’re well-equipped to create engaging PWAs that will delight users and drive business success. The future of web and mobile is intertwined, and Flutter stands at the forefront of this evolution.

You may also like: Flutter 3.41: What’s New, Features, Performance Improvements & Developer Guide