React中firebase-messaging-sw.js的onBackgroundMessage触发App.tsx事件

Service Worker 运行在独立于页面主线程的沙箱环境，和React应用的执行上下文完全隔离，无法直接调用App.tsx里定义的函数，需要通过跨线程消息通信+持久化待处理标记的方式实现需求，具体步骤如下：

第一步：修改 firebase-messaging-sw.js 逻辑 #

收到后台消息时做两个操作：一是向所有已加载的页面线程推送消息事件，二是把待弹窗的消息内容持久化存储，避免页面未加载完成时丢消息。
替换原有Service Worker代码如下：

const messaging = firebase.messaging();

// 存储待处理的后台消息标记，SW环境下使用Cache API实现简单持久化
async function savePendingNotification(payload) {
  const cache = await caches.open('firebase-pending-messages');
  await cache.put('pending-modal', new Response(JSON.stringify({
    show: true,
    payload: payload,
    timestamp: Date.now()
  })));
}

// 向所有活跃的页面客户端发送跨线程消息
async function sendMessageToClients(payload) {
  const allClients = await clients.matchAll({
    type: 'window',
    includeUncontrolled: true
  });
  allClients.forEach(client => {
    client.postMessage({
      type: 'FIREBASE_BACKGROUND_MESSAGE',
      payload: payload
    });
  });
}

messaging.onBackgroundMessage(async function(payload) {
  console.log('[firebase-messaging-sw.js] Received background message ', payload);
  const notificationTitle = payload.notification?.title;
  const notificationOptions = {
    body: payload.notification?.body,
    icon: '/firebase-logo.png'
  };
  
  self.registration.showNotification(notificationTitle, notificationOptions);

  // 存储待处理标记
  await savePendingNotification(payload);
  // 给已打开的页面发实时通知
  await sendMessageToClients(payload);
});

第二步：在App.tsx中添加监听和处理逻辑 #

需要覆盖三个场景的消息捕获：应用初始化时检查历史待处理消息、实时接收Service Worker推送的消息、用户切回浏览器时检查待处理消息。
代码示例：

import { useEffect, useState } from 'react';
// 引入项目自定义的模态框组件
import YourModal from './components/YourModal';

function App() {
  const [modalVisible, setModalVisible] = useState(false);
  const [modalData, setModalData] = useState(null);

  // 检查是否存在待展示的消息弹窗
  const checkPendingMessage = async () => {
    try {
      const cache = await caches.open('firebase-pending-messages');
      const res = await cache.match('pending-modal');
      if (res) {
        const data = await res.json();
        // 仅处理5分钟内的新消息，过滤过期历史消息
        if (data.show && Date.now() - data.timestamp < 5 * 60 * 1000) {
          setModalData(data.payload);
          setModalVisible(true);
          // 处理完成后清除标记，避免重复弹窗
          await cache.delete('pending-modal');
        } else {
          await cache.delete('pending-modal');
        }
      }
    } catch (e) {
      console.error('Check pending message failed', e);
    }
  };

  useEffect(() => {
    // 注册Service Worker消息监听
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.addEventListener('message', (event) => {
        if (event.data?.type === 'FIREBASE_BACKGROUND_MESSAGE') {
          // 页面当前可见则直接弹窗，不可见则等待切回时统一检查
          if (document.visibilityState === 'visible') {
            setModalData(event.data.payload);
            setModalVisible(true);
            caches.open('firebase-pending-messages').then(cache => cache.delete('pending-modal'));
          }
        }
      });
    }

    // 监听页面可见性变化，用户切回浏览器时触发检查
    const handleVisibilityChange = () => {
      if (document.visibilityState === 'visible') {
        checkPendingMessage();
      }
    };
    document.addEventListener('visibilitychange', handleVisibilityChange);

    // 应用首次加载时检查一次待处理消息
    checkPendingMessage();

    return () => {
      document.removeEventListener('visibilitychange', handleVisibilityChange);
    };
  }, []);

  return (
    <div className="App">
      {/* 项目其他页面内容 */}
      <YourModal 
        open={modalVisible} 
        onClose={() => setModalVisible(false)}
        notificationData={modalData}
      />
    </div>
  );
}

export default App;

注意事项 #

• Service Worker运行在独立worker上下文，不存在window对象，无法直接访问React运行时的变量、方法，不要尝试直接跨上下文调用函数。
• 待处理消息标记要加过期时间校验，避免用户间隔很久打开页面时弹出失效的历史消息。
• 确保firebase-messaging-sw.js注册的作用域为站点根目录，否则跨线程消息通信、存储共享可能出现异常。

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