如何通过Flutter代码实现Firebase向Chrome跨标签推送通知

前置准备 #

确保你的Flutter项目已接入Firebase，且在Firebase控制台启用了Cloud Messaging（FCM）。针对Web平台，需在web/index.html中添加Firebase配置脚本（从Firebase控制台项目设置页复制）。

依赖配置 #

在pubspec.yaml中添加以下依赖：

dependencies:
  firebase_core: ^latest_version
  firebase_messaging: ^latest_version
  flutter_local_notifications: ^latest_version

执行flutter pub get完成依赖安装。

Web平台额外配置 #

1. 在web/manifest.json中补充通知相关配置：

{
  "gcm_sender_id": "103953800507",
  "permissions": ["notifications"],
  "background_color": "#ffffff"
}

2. 在web/index.html的Firebase配置脚本后，添加Service Worker注册代码：

<script>
  if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
      navigator.serviceWorker.register('/firebase-messaging-sw.js');
    });
  }
</script>

3. 在项目根目录创建web/firebase-messaging-sw.js文件，内容如下：

importScripts('https://www.gstatic.com/firebasejs/9.23.0/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/9.23.0/firebase-messaging-compat.js');

firebase.initializeApp({
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
});

const messaging = firebase.messaging();

messaging.onBackgroundMessage((payload) => {
  const notificationTitle = payload.notification.title;
  const notificationOptions = {
    body: payload.notification.body,
    icon: '/icons/Icon-192.png' // 替换为你的应用图标路径
  };

  self.registration.showNotification(notificationTitle, notificationOptions);
});

Flutter核心代码实现 #

1. 初始化Firebase与通知服务

import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_messaging/firebase_messaging.dart';
import 'package:flutter_local_notifications/flutter_local_notifications.dart';
import 'package:flutter/material.dart';

final FlutterLocalNotificationsPlugin _localNotifications = FlutterLocalNotificationsPlugin();
final FirebaseMessaging _firebaseMessaging = FirebaseMessaging.instance;

Future<void> initFirebaseMessaging() async {
  await Firebase.initializeApp();
  
  // 请求Chrome通知权限
  NotificationSettings settings = await _firebaseMessaging.requestPermission(
    alert: true,
    badge: true,
    sound: true,
  );

  if (settings.authorizationStatus == AuthorizationStatus.authorized) {
    // 获取设备令牌（可选，用于定向推送）
    String? token = await _firebaseMessaging.getToken();
    print('设备令牌: $token');

    // 初始化本地通知插件
    const AndroidInitializationSettings androidInit = AndroidInitializationSettings('@mipmap/ic_launcher');
    const WebInitializationSettings webInit = WebInitializationSettings(
      notificationBackgroundColor: '#ffffff',
    );
    const InitializationSettings initSettings = InitializationSettings(
      android: androidInit,
      web: webInit,
    );
    await _localNotifications.initialize(initSettings);

    // 处理前台收到的通知
    FirebaseMessaging.onMessage.listen((RemoteMessage message) {
      RemoteNotification? notification = message.notification;
      if (notification != null) {
        _localNotifications.show(
          notification.hashCode,
          notification.title,
          notification.body,
          const NotificationDetails(
            android: AndroidNotificationDetails(
              'promo_channel',
              '推广活动通知',
              importance: Importance.max,
              priority: Priority.high,
            ),
            web: WebNotificationDetails(
              icon: '/icons/Icon-192.png',
            ),
          ),
        );
      }
    });

    // 处理用户点击后台通知的逻辑
    FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) {
      print('用户点击通知: ${message.notification?.title}');
      // 此处可添加页面跳转逻辑，比如打开指定路由
    });
  }
}

2. 在main.dart中调用初始化方法

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await initFirebaseMessaging();
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FCM Demo',
      home: Scaffold(
        appBar: AppBar(title: const Text('推广通知测试')),
        body: const Center(child: Text('等待Firebase推送通知')),
      ),
    );
  }
}

测试推广活动推送 #

在Firebase控制台创建推广活动时，选择目标平台为Web，填写通知标题、正文后发送。Chrome浏览器即使处于后台或其他标签页，只要用户已授权通知权限，就能收到推送。

注意：Web平台通知依赖浏览器权限，首次打开应用需引导用户允许；同时确保firebase-messaging-sw.js路径正确，否则后台通知可能无法触发。

内容的提问来源于stack exchange，提问作者Refay Deen