Firebase Cloud Message动态内容不更新，显示service-worker.js内容求助

这个问题我之前也碰到过，大概率是你的service-worker.js里的推送事件处理逻辑覆盖了FCM发送的通知内容，咱们一步步来排查解决：

1. 检查并修正service-worker的push事件处理 #

如果你的service-worker里监听了push事件，并且硬编码了通知的标题和文本，就会直接覆盖FCM推送过来的内容。你需要修改逻辑，从推送的payload里读取动态内容：

self.addEventListener('push', function(event) {
  // 解析推送过来的JSON数据
  const payload = event.data?.json() || {};
  
  // 优先使用FCM发送的通知内容，没有的话再用默认值
  const notificationTitle = payload.notification?.title || '默认标题';
  const notificationOptions = {
    body: payload.notification?.text || '默认内容',
    // 可以添加其他通知选项，比如图标、点击动作等
    icon: '/icons/notification-icon.png'
  };

  // 展示通知，一定要用event.waitUntil确保异步操作完成
  event.waitUntil(
    self.registration.showNotification(notificationTitle, notificationOptions)
  );
});

2. 选择合适的消息类型（通知消息 vs 数据消息） #

FCM有两种消息类型，处理逻辑不同：

• 通知消息（你现在发送的类型，带notification字段）：当应用在后台时，浏览器会自动展示通知，但如果service-worker拦截了push事件并手动调用showNotification，就会优先使用service-worker里的内容。
• 数据消息（不带notification字段，只用data字段）：不管应用在前台还是后台，都会触发push事件，完全由你在service-worker里控制通知内容。如果想彻底避免浏览器自动处理，你可以改成发送数据消息：

请求体修改为：

{
  "data": {
    "title": "Your Title",
    "text": "Your Text"
  },
  "to" : "daPcA4y33Wg:APA91bFB1m3fj38BjyPUlfk-N4F4oWM4EkQZeyZvjVFJv-18vc4GN2rfIVbBGp59VMDjeO9A3D52itL8gehW20SwL0rcoT066v65g6ciq64d36ys6WTofSXTnc_wD1phfBZbKjR2V7Ns"
}

对应的service-worker处理逻辑调整为：

self.addEventListener('push', function(event) {
  const payload = event.data?.json() || {};
  const title = payload.data?.title || '默认标题';
  const options = {
    body: payload.data?.text || '默认内容',
  };
  event.waitUntil(self.registration.showNotification(title, options));
});

3. 确保service-worker已更新 #

修改service-worker.js后，一定要让浏览器更新这个文件：

• 打开浏览器开发者工具 → Application → Service Workers，点击"Update"按钮强制更新
• 或者重启浏览器，清除缓存后重新加载页面
• 注意：service-worker只有在文件内容发生实质性变化时才会更新，仅修改注释不会触发更新

4. 验证请求的有效性 #

• 确认请求返回状态码是200 OK，没有错误信息
• 检查Authorization头里的API key是否正确，to字段的设备token是否有效（如果token过期或无效，FCM会返回对应的错误）

5. 前台应用的通知处理 #

如果你的应用在前台运行，FCM不会自动展示通知，需要在应用主代码里监听message事件，手动创建通知：

// 在你的web应用主JS文件中
messaging.onMessage((payload) => {
  console.log('收到前台推送消息:', payload);
  const notificationTitle = payload.notification.title;
  const notificationOptions = {
    body: payload.notification.text,
  };
  // 手动创建通知
  new Notification(notificationTitle, notificationOptions);
});

按照上面的步骤调整后，FCM发送的动态标题和文本应该就能正常显示了。

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