Building Push Notifications for Flutter Web — A Complete Guide

This article was translated specially for the channel FlutterPulseYou'll find lots of interesting things related to Flutter on this channel. Don't hesitate to subscribe!🚀

Push notifications are a powerful way to engage users, especially in web apps. With Flutter Web becoming more mature, many developers ask:

"Can I send push notifications to my Flutter Web app?"

The short answer is yes — but it requires using Firebase Cloud Messaging (FCM), service workers, and a bit of JavaScript interop.

In this article, we'll walk through everything you need to integrate push notifications into your Flutter web app.

🧱 Requirements

Before jumping in, make sure you have:

• A Flutter Web project (flutter create your_project)
• Firebase project set up
• Basic understanding of Firebase Console & Flutter web
• Domain hosted with HTTPS (push notifications only work on secure contexts)

🔧 Step 1: Add Firebase to Your Flutter Web Project

Use the Firebase CLI:

firebase login
firebase init

Choose:

• Hosting
• Firebase SDK for web

Now add Firebase dependencies to pubspec.yaml:

dependencies:
  firebase_core: ^2.0.0
  firebase_messaging: ^14.0.0

Then initialize Firebase in your main.dart:

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(MyApp());
}

📬 Step 2: Enable FCM in Firebase Console

1. Go to Firebase Console
2. Select your project
3. Navigate to Cloud Messaging
4. Click Get Started
5. Copy the Web Push certificate key under Web configuration — you'll need this in the code

🛠 Step 3: Configure firebase-messaging-sw.js

Flutter Web uses a service worker to listen to background notifications.

In your web/ directory, create a file named firebase-messaging-sw.js:

// web/firebase-messaging-sw.js

importScripts('https://www.gstatic.com/firebasejs/9.6.10/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/9.6.10/firebase-messaging-compat.js');
firebase.initializeApp({
  apiKey: 'YOUR_API_KEY',
  authDomain: 'your-project.firebaseapp.com',
  projectId: 'your-project-id',
  messagingSenderId: 'your-sender-id',
  appId: 'your-app-id',
});
const messaging = firebase.messaging();

In web/index.html, register the service worker:

<script>
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('firebase-messaging-sw.js')
      .then(function(registration) {
        console.log('Service Worker Registered');
      });
  }
</script>

🔐 Step 4: Request Notification Permissions in Dart

Inside your Flutter app:

import 'package:firebase_messaging/firebase_messaging.dart';

void setupNotifications() async {
  FirebaseMessaging messaging = FirebaseMessaging.instance;
  // Ask for permission
  NotificationPermission permission = await messaging.requestPermission();
  // Get FCM token
  String? token = await messaging.getToken(
    vapidKey: 'YOUR_VAPID_KEY_FROM_FIREBASE',
  );
  print("FCM Token: $token");
  // Listen to foreground messages
  FirebaseMessaging.onMessage.listen((RemoteMessage message) {
    print('New message: ${message.notification?.title}');
  });
}

Call this setupNotifications() method in your app's initialization.

📤 Step 5: Sending a Test Push Notification

You can send push notifications from:

• Firebase Console
• Postman using HTTP v1 API
• Backend server

To send via Firebase Console:

1. Go to Cloud Messaging
2. Click Send your first message
3. Enter title and body
4. Under Web push, paste the FCM token
5. Click Send

Your Flutter web app will now receive notifications even when the browser is closed (if the service worker is registered properly).

🧪 Step 6: Testing and Debugging

• Use Chrome DevTools > Application > Service Workers to verify your service worker is running
• Test background and foreground notifications separately
• Check console for FCM token and message logs

💡 Bonus: Displaying Custom Notification UI

You can handle notification rendering manually in the firebase-messaging-sw.js:

messaging.onBackgroundMessage(function(payload) {
  self.registration.showNotification(payload.notification.title, {
    body: payload.notification.body,
    icon: '/icons/Icon-192.png',
  });
});

This ensures your brand consistency across all platforms.

✅ Wrapping Up

Flutter Web + Firebase Cloud Messaging gives you the power to:

• Send real-time alerts
• Engage users even when your app isn't open
• Build installable web apps with native-like behavior

Key Takeaways:

• Flutter web supports push via Firebase with service workers
• HTTPS domain is required
• Always test both foreground and background flows
• Customize notification styling using firebase-messaging-sw.js

Push notifications aren't just a mobile thing anymore — your Flutter web app can now reach users just as effectively.

If you found this story helpful, you can support me at Buy Me a Coffee!