网页非焦点状态下Firebase推送通知无法触发自定义函数与音效问题

这个问题我之前也碰到过！核心原因是当网页处于后台/非焦点状态时，FCM的消息会被浏览器的系统通知机制接管，你写的onMessage回调只会在页面前台时触发，后台时根本不会执行，所以自定义函数和音频播放都没反应。

下面是具体的解决步骤：

1. 用Service Worker处理后台消息 #

FCM的后台消息需要在Service Worker中处理，我们需要在firebase-messaging-sw.js（你的Service Worker文件）里添加setBackgroundMessageHandler，用来接收后台消息并和主线程通信。

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，替换成你的配置
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"
});

const messaging = firebase.messaging();

// 处理后台推送消息
messaging.setBackgroundMessageHandler(function(payload) {
  console.log('后台收到推送:', payload);

  // 把消息发送给主线程，触发自定义逻辑
  self.clients.matchAll({ includeUncontrolled: true, type: 'window' }).then(clients => {
    clients.forEach(client => {
      client.postMessage({
        type: 'FCM_BACKGROUND_MSG',
        payload: payload
      });
    });
  });

  // 显示系统通知（这一步是默认的，你可以自定义内容）
  const notificationTitle = payload.notification?.title || '新通知';
  const notificationOptions = {
    body: payload.notification?.body || '你有一条新消息',
    icon: '/your-notification-icon.png'
  };

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

2. 主线程监听Service Worker的消息 #

在你的网页主JS文件里，添加监听Service Worker消息的代码，同时把原来的onMessage逻辑抽成统一的处理函数，这样前台和后台消息都能复用：

// 前台消息处理
messaging.onMessage(function(payload) {
  handleNotification(payload);
});

// 监听来自Service Worker的后台消息
navigator.serviceWorker.addEventListener('message', function(event) {
  if (event.data.type === 'FCM_BACKGROUND_MSG') {
    handleNotification(event.data.payload);
  }
});

// 统一处理通知的函数
function handleNotification(payload) {
  // 触发你的自定义点击事件
  $("#reload").trigger("click");
  
  // 处理音频播放（注意浏览器权限限制）
  const audio = new Audio('你的音频文件路径.mp3');
  audio.play().catch(err => {
    console.log('音频播放失败，可能需要用户交互授权:', err);
    // 这里可以提示用户点击页面以允许自动播放音频
  });
  
  console.log('处理通知:', payload);
}

3. 解决音频播放的权限问题 #

大部分现代浏览器都有自动播放限制：只有当用户和页面有过至少一次交互（比如点击页面）后，才能自动播放音频。所以你可以在页面加载后，引导用户触发一次交互来获取权限：

// 第一次点击页面时请求音频权限
document.addEventListener('click', function() {
  const audio = new Audio('你的音频文件路径.mp3');
  audio.play().then(() => {
    console.log('音频自动播放权限已获取');
  }).catch(err => {
    console.log('获取音频权限失败:', err);
  });
}, { once: true }); // 只执行一次

最后要注意的点 #

• 确保你的Service Worker已经正确注册，Firebase配置信息完全正确。
• 测试后台推送时，一定要把页面切换到其他标签页或者最小化浏览器，仅仅失去焦点（比如点击桌面）可能不算后台状态。
• 如果你的网站是HTTPS的（FCM要求必须HTTPS，本地开发用localhost除外），不然Service Worker无法正常工作。

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