Flutter Web中Firebase Messaging后台通知处理方案咨询

这个问题我之前也碰到过，核心原因是Firebase Web SDK的后台消息处理机制和移动端不一样——后台通知的监听逻辑必须放在Service Worker中，而不是Flutter的Dart代码里。你的报错信息messaging/only-available-in-sw也明确说明了这一点：该方法只能在Service Worker上下文使用。

下面是完整的可行方案，分步骤实现：

1. 创建并配置Service Worker文件 #

在你的Flutter项目的web目录下，新建一个名为firebase-messaging-sw.js的文件，写入以下内容：

// 引入对应版本的Firebase SDK（要和你Dart代码中使用的Firebase版本匹配）
importScripts('https://www.gstatic.com/firebasejs/8.0.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.0.1/firebase-messaging.js');

// 初始化Firebase（使用你的项目配置）
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"
});

// 获取Messaging实例
const messaging = firebase.messaging();

// 监听后台消息
messaging.setBackgroundMessageHandler(function(payload) {
  console.log('[firebase-messaging-sw.js] Received background message ', payload);
  
  // 可选：自定义通知内容
  const notificationTitle = '后台通知标题';
  const notificationOptions = {
    body: payload.data.body,
    icon: '/icons/launcher-icon-192.png' // 替换成你的图标路径
  };

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

2. 在Flutter Dart代码中注册Service Worker #

修改你的PushNotificationService或者在main.dart中，添加Service Worker的注册逻辑，确保它在应用启动时被加载：

import 'package:firebase/firebase.dart' as firebase;
import 'package:flutter/foundation.dart';
import 'package:universal_html/html.dart' as html;

class PushNotificationService {
  firebase.Messaging _mc;

  Future initialise() async {
    _mc = firebase.messaging();
    
    // 注册Service Worker（仅Web平台）
    if (kIsWeb) {
      try {
        await html.window.navigator.serviceWorker.register('/firebase-messaging-sw.js');
        print('Service Worker注册成功');
      } catch (e) {
        print('Service Worker注册失败: $e');
      }
    }

    // 前台消息监听（你的原有代码，保持不变）
    _mc.onMessage.listen((event) {
      print('New Message: ${event.data}');
    });
  }
}

3. 关键注意事项 #

• Firebase版本匹配：确保Service Worker中引入的Firebase SDK版本和你Dart依赖的firebase包版本一致（比如你用的是8.0.1，就保持统一）。
• HTTPS要求：除了localhost调试环境，生产环境必须使用HTTPS，否则Service Worker无法正常工作。
• 通知权限：确保用户已经授予了通知权限，可以在初始化时请求权限：

  await _mc.requestPermission();
  

• Service Worker路径：firebase-messaging-sw.js必须放在web根目录下，否则注册时会找不到文件。

这样修改后，当你的Flutter Web应用处于后台（或者页面被关闭但Service Worker仍在运行）时，就能正常接收并处理Firebase的后台通知了。

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