Flutter PWA集成Firebase Cloud Messaging实现移动端通知问题

你已经完成了FCM的基础配置，现在需要针对前台/后台/关闭状态分别处理系统通知的显示，同时实现点击通知打开应用的功能，具体步骤如下：

1. 后台/应用关闭状态：完善Service Worker通知逻辑 #

你的firebase-messaging-sw.js仅打印了消息，需要添加系统通知创建代码，让Service Worker在应用后台或关闭时触发顶部通知，并处理点击事件：

修改firebase-messaging-sw.js：

importScripts("https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js");
importScripts("https://www.gstatic.com/firebasejs/8.10.0/firebase-messaging.js");

firebase.initializeApp({
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: "",
});

const messaging = firebase.messaging();

// 后台消息触发系统通知
messaging.onBackgroundMessage((message) => {
    console.log("onBackgroundMessage", message);
    const notificationTitle = message.notification?.title || "新通知";
    const notificationOptions = {
        body: message.notification?.body || "您有一条新消息",
        icon: "/icons/Icon-192.png", // 替换为你的PWA图标路径
        data: message.data, // 携带消息数据，供点击时使用
    };

    // 显示系统顶部通知
    return self.registration.showNotification(notificationTitle, notificationOptions);
});

// 处理通知点击：打开应用主页
self.addEventListener('notificationclick', (event) => {
    event.notification.close();
    // 打开应用根路径，确保匹配你的PWA部署地址
    event.waitUntil(clients.openWindow('/'));
});

2. 前台状态：Flutter中触发系统通知 #

应用在前台时，FCM不会自动弹出系统通知，需要通过浏览器Notification API手动触发，借助dart:js实现Flutter与JS的交互：

步骤1：在main.dart中添加权限请求与前台消息处理 #

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();

  // 请求用户授权通知权限
  await FirebaseMessaging.instance.requestPermission(
    alert: true,
    badge: true,
    sound: true,
  );

  // 前台消息监听：调用JS显示系统通知
  FirebaseMessaging.onMessage.listen((RemoteMessage message) {
    print('前台收到消息: ${message.data}');
    // 调用全局JS函数创建通知
    js.context.callMethod('showFlutterNotification', [
      message.notification?.title ?? '新通知',
      message.notification?.body ?? '您有一条新消息',
    ]);
  });

  // 处理通知打开应用（前台/后台切换场景）
  FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) {
    print('点击通知打开应用: ${message.data}');
    // 可在此处添加路由跳转逻辑，比如跳转到对应详情页
  });

  runApp(const MyApp());
}

步骤2：在index.html中添加JS通知函数 #

修改index.html中的脚本，添加通知处理函数，并调整Service Worker注册顺序（避免Flutter与FCM的Service Worker冲突）：

<body>
  <script>
    // 定义Flutter调用的通知函数
    function showFlutterNotification(title, body) {
      if (!("Notification" in window)) {
        alert("当前浏览器不支持通知功能");
        return;
      }
      
      // 已授权则直接显示通知
      if (Notification.permission === "granted") {
        new Notification(title, {
          body: body,
          icon: "/icons/Icon-192.png",
        });
      } 
      // 未授权则请求权限
      else if (Notification.permission !== "denied") {
        Notification.requestPermission().then(permission => {
          if (permission === "granted") {
            new Notification(title, {body: body, icon: "/icons/Icon-192.png"});
          }
        });
      }
    }

    if ('serviceWorker' in navigator) {
      window.addEventListener('load', function (ev) {
        _flutter.loader.loadEntrypoint({
          serviceWorker: {
            serviceWorkerVersion: serviceWorkerVersion,
          }
        }).then(function (engineInitializer) {
          return engineInitializer.initializeEngine();
        }).then(function (appRunner) {
          return appRunner.runApp();
        });

        // 先注册Flutter Service Worker，再注册FCM的
        navigator.serviceWorker.register('flutter_service_worker.js?v=' + serviceWorkerVersion)
          .then(() => navigator.serviceWorker.register('firebase-messaging-sw.js'));
      });
    }
  </script>
</body>

3. 测试注意事项 #

• 确保PWA已通过浏览器"添加到主屏幕"功能安装到手机，未安装的PWA后台可能无法触发Service Worker通知。
• 发送测试通知时，需包含notification字段（可通过Firebase控制台的"通知"类型发送）。
• 检查手机浏览器权限：确保已允许该网站发送通知。

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