站点处于打开状态时如何处理Firebase推送通知

核心原因说明 #

你遇到的是FCM的默认行为：当站点在前台活跃时，FCM不会自动弹出系统通知，也不会走后台推送的处理逻辑，相关接收逻辑需要开发者自行注册监听实现。

实现步骤 #

1. 注册前台消息监听 #

在站点的页面前台JS代码中（非Service Worker文件），初始化FCM实例后，注册onMessage回调接收前台场景的推送消息：

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

// 初始化FCM
const messaging = getMessaging();

// 监听前台推送消息
onMessage(messaging, (payload) => {
  console.log('收到前台推送', payload);
  // 此处可直接执行自定义操作：比如更新页面数据、播放提示音、弹出站内提示等
});

onMessage回调仅在站点处于前台激活状态时触发，站点后台运行/关闭时不会触发该回调

2. 前台场景弹出系统通知 #

如果需要前台收到推送时和后台场景一样弹出系统通知，可以在onMessage回调中调用浏览器NotificationAPI实现：

onMessage(messaging, (payload) => {
  // 先校验用户已授予通知权限
  if (Notification.permission !== 'granted') return;

  // 构造通知参数
  const notifyTitle = payload.notification?.title || '新通知';
  const notifyOptions = {
    body: payload.notification?.body || '你有一条新消息',
    icon: '/public/notify-icon.png', // 替换为你的通知图标路径
    data: payload.data // 携带推送自定义参数，用于点击后的逻辑处理
  };

  // 弹出系统通知
  const notification = new Notification(notifyTitle, notifyOptions);
  
  // 配置通知点击事件
  notification.onclick = (e) => {
    e.preventDefault();
    // 自定义操作：跳转指定页面、打开对应内容等
    window.location.href = `/detail?id=${payload.data.id}`;
    notification.close();
  };
});

3. 后台/关闭场景的自定义操作配置 #

如果需要统一处理后台、站点关闭时的通知点击逻辑，需要在Service Worker文件（通常是firebase-messaging-sw.js）中注册notificationclick事件：

// firebase-messaging-sw.js 中添加
self.addEventListener('notificationclick', (event) => {
  event.notification.close();
  // 自定义点击逻辑，比如跳转到对应页面
  event.waitUntil(
    clients.openWindow(`/detail?id=${event.notification.data.id}`)
  );
});

注意事项 #

• 推送时建议把自定义业务参数放在消息的data字段中，不要完全依赖notification字段，避免不同场景下参数获取不一致
• 首次使用通知前需要调用Notification.requestPermission()向用户申请通知权限，没有权限的情况下无法弹出系统通知
• 开发测试时需要确认浏览器没有开启“前台站点禁止弹出通知”的相关配置，避免功能验证失败

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