Integrating Real-Time Notifications with Web Push in Flutter

Introduction

Real-time notifications are essential for modern apps. For Flutter-based mobile development, integrating Web Push gives you a uniform delivery channel for web and progressive web apps, while Firebase Cloud Messaging (FCM) remains the most practical cross-platform bridge for mobile. This tutorial shows how to design an architecture, configure VAPID/web push for the web, integrate FCM in Flutter for both mobile and web, and implement a server that sends push messages.

Architecture Overview

A robust solution separates concerns: client apps (Flutter mobile and Flutter web), a push-capable backend, and optionally a push gateway (FCM or a Web Push gateway using VAPID keys). For mobile, use FCM SDK to receive native notifications via APNs (iOS) and FCM (Android). For web, use the browser's Push API with a service worker and VAPID keys for authentication. The backend stores device tokens (FCM tokens for mobile, subscription objects for web) and sends notifications via the appropriate channel.

Key points:

• Mobile: Flutter + firebase_messaging plugin for registration and foreground handling.

• Web: service worker (firebase-messaging-sw.js or custom) to receive push when the web page is closed.

• Backend: map users to tokens/subscriptions and send messages with correct headers/payload.

Configuring Web Push and VAPID

On the web, generate VAPID keys (public/private). If using FCM for web push, configure your Firebase project and copy the messagingSenderId and web API key into web/index.html and firebase config. For a custom Web Push gateway, store the VAPID public key in the client to create a PushSubscription with the browser PushManager.

Steps for web push subscription:

• Ask the user for Notification permission.

• Register a service worker that listens for push events.

• Call serviceWorkerRegistration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: VAPID_PUBLIC_KEY }).

• Send subscription.endpoint and keys to your backend for storage.

The service worker must display notifications for background pushes. If you use FCM, include firebase-messaging-sw.js with importScripts('https://www.gstatic.com/firebasejs/.../firebase-messaging.js') and call messaging.setBackgroundMessageHandler(...) to show a notification.

Flutter Integration For Mobile And Web

Use the firebase_messaging package to unify token management and message handling across platforms. On mobile it interacts with the native FCM SDK; on web it integrates with the browser FCM implementation and requires a messaging SW file.

Minimal Dart setup to request permissions and handle messages:

import 'package:firebase_messaging/firebase_messaging.dart';

final fcm = FirebaseMessaging.instance;

void initMessaging() async {
  await fcm.requestPermission();
  String? token = await fcm.getToken();
  print('FCM Token: $token');
  FirebaseMessaging.onMessage.listen((msg) => print('Foreground message: ${msg.data}'));
}

When running on web, ensure the service worker file (firebase-messaging-sw.js) is present in web/ and correctly references your Firebase config. Send the FCM token from the client to the backend so the server can address the device.

Best practices:

• Store tokens per user and refresh them when the SDK reports refresh events.

• Use data-only messages for real-time updates and notifications for user-visible alerts.

• Handle permission decline gracefully and provide in-app fallback signals (e.g., WebSocket updates).

Backend: Sending Push Messages

Your backend must choose between FCM and direct Web Push depending on the stored subscription. For FCM, call the FCM v1 or legacy HTTP endpoint with an Authorization header and a JSON payload. For raw Web Push, use a library that supports VAPID (node-web-push, pywebpush, or a Dart package) and send the subscription's endpoint with proper encryption headers.

Example Dart snippet to send a simple message via FCM legacy endpoint (suitable for small demos or serverless functions):

import 'package:http/http.dart' as http;

Future<void> sendFcm(String serverKey, String token, String title, String body) async {
  final resp = await http.post(
    Uri.parse('https://fcm.googleapis.com/fcm/send'),
    headers: {'Authorization': 'key=$serverKey', 'Content-Type': 'application/json'},
    body: '{"to":"$token","notification":{"title":"$title","body":"$body"}}',
  );
  print('FCM response: ${resp.statusCode} ${resp.body}');
}

For web push with VAPID, use a library on the server to encrypt payloads and set the Authorization header (Web Push protocol). Ensure TTL and VAPID claims are configured, and fall back to queued delivery if the push service returns 410 (unsubscribe) or other transient errors.

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

Integrating real-time notifications in Flutter for mobile development requires combining platform-specific mechanics (APNs/FCM) and the web's Push API. Using Firebase Messaging simplifies cross-platform token management and delivery, while VAPID and service workers enable web push when using custom gateways. Keep a robust backend mapping tokens/subscriptions, refresh tokens reliably, and handle permission states gracefully. With attention to these details you can deliver consistent real-time experiences across Flutter mobile and web.