Firebase Cloud Messaging中onMessage未触发问题求助

我来帮你排查下FCM onMessage回调没触发的问题，结合你给出的发送代码，咱们一步步拆解可能的原因和解决办法：

1. 先确认客户端的FCM回调是否正确注册 #

首先得确保你的客户端代码已经正确初始化FCM，并且在正确的时机注册了onMessage回调。以Web端为例，你的客户端代码应该类似这样：

import { getMessaging, onMessage } from "firebase/messaging";

// 初始化messaging实例
const messaging = getMessaging();
// 注册前台消息回调
onMessage(messaging, (payload) => {
  console.log('收到前台消息:', payload);
  // 这里写你的消息处理逻辑
});

另外要注意：如果是处理后台消息，你还需要在Service Worker文件里注册onBackgroundMessage回调，因为后台消息是由Service Worker接管的，不会触发前台的onMessage。

2. 检查消息发送格式的坑 #

你发送的消息同时包含了notification和data字段，这里有个容易踩的点：

• 当应用处于前台时：onMessage会接收到完整的payload（包括notification和data内容），这时候系统不会自动弹出通知，需要你自己处理。
• 当应用处于后台时：系统会自动展示notification字段对应的通知，而data字段会附加到通知的点击事件中，这时候前台的onMessage不会触发，如果你想处理后台消息，必须在Service Worker里用onBackgroundMessage。

如果希望无论前台后台都由自己的代码处理消息逻辑，可以尝试只发送data字段，然后在客户端（前台或Service Worker）里手动创建通知：

// 修改发送的body内容
body: JSON.stringify({
  'to': to,
  'data': {
    'title': 'Portugal vs. Denmark',
    'body': '5 to 1',
    'message': 'example'
  }
})

3. 验证消息请求是否真的发送成功 #

你当前的fetch代码没有错误捕获逻辑，很可能请求本身就失败了，导致消息根本没发到FCM服务器。建议补充错误处理，同时打印响应信息排查问题：

fetch('https://fcm.googleapis.com/fcm/send', {
  'method': 'POST',
  'headers': {
    'Authorization': 'key=' + key,
    'Content-Type': 'application/json',
  },
  'body': JSON.stringify({
    'to': to,
    'notification': notification,
    'data': { 'message': 'example' }
  })
})
.then(function (response) {
  console.log('FCM请求响应:', response);
  return response.json();
})
.then(function (data) {
  console.log('FCM返回数据:', data);
})
.catch(function (error) {
  console.error('发送消息失败:', error);
});

另外要确认两个关键参数：

• Authorization头里的key必须是服务器端的有效密钥（Legacy Server Key或Cloud Messaging API Key），不能用客户端的配置密钥。
• to字段的设备token必须是有效的，没有过期或被注销。可以先在FCM控制台手动发送一条消息到这个token，验证设备是否能收到，排除token本身的问题。

4. 排查浏览器/环境限制 #

如果是Web端，还要注意：

• 必须确保用户已经授予了通知权限，可以用console.log(Notification.permission)检查，状态必须是granted才能接收消息。
• 开发环境必须是localhost或者HTTPS协议（FCM要求生产环境必须HTTPS，localhost是例外），否则Service Worker无法注册，会影响后台消息接收。

先从这几个方向排查，优先确认消息是否成功发送，再检查客户端的回调注册和环境配置，应该能找到问题所在。

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