如何在接收Firebase后台消息时更新Redux状态

核心思路 #

Service Worker（firebase-messaging-sw.js）运行在独立线程，无法直接访问Redux Store，必须通过Service Worker与前台页面的消息通信，将后台消息传递到前台后，再触发Redux状态更新。

步骤1：在Service Worker中发送消息到前台页面 #

修改firebase-messaging-sw.js，在后台消息回调中找到当前活跃的页面客户端，通过postMessage传递消息：

self.addEventListener('backgroundmessage', (payload) => {
  // 提取需要传递的消息数据（比如控制flag的值）
  const messageContent = payload.data;
  
  // 获取所有活跃的窗口客户端
  self.clients.matchAll({ 
    type: 'window', 
    includeUncontrolled: true // 包含未被SW控制的页面（如果有的话）
  }).then(clients => {
    if (clients.length === 0) return;
    // 给每个活跃页面发送消息
    clients.forEach(client => {
      client.postMessage({
        type: 'BACKGROUND_FCM_MESSAGE', // 自定义消息类型，用于前台区分
        payload: messageContent
      });
    });
  });
});

如果需要处理用户点击后台通知的场景，可添加以下代码同步状态：

self.addEventListener('notificationclick', (event) => {
  event.notification.close();
  // 打开应用首页并传递通知数据
  event.waitUntil(
    clients.openWindow('/').then(windowClient => {
      if (windowClient) {
        windowClient.postMessage({
          type: 'FCM_NOTIFICATION_CLICK',
          payload: event.notification.data
        });
      }
    })
  );
});

步骤2：前台页面监听消息并更新Redux状态 #

在你的Redux状态维护文件（比如flag.js）或项目入口文件中，监听Service Worker的消息事件，收到消息后触发Redux的action更新flag状态：

情况1：全局可访问Redux Store

如果你的Store在入口文件全局导出：

import store from './path-to-your-redux-store'; // 导入你的Redux Store

// 监听Service Worker消息
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.addEventListener('message', (event) => {
    const { type, payload } = event.data;
    
    // 匹配后台消息类型
    if (type === 'BACKGROUND_FCM_MESSAGE' || type === 'FCM_NOTIFICATION_CLICK') {
      // 触发更新flag的action（替换成你实际的action type和payload）
      store.dispatch({
        type: 'UPDATE_FLAG',
        payload: payload.flagValue // 假设消息中包含控制flag的值
      });
    }
  });
}

情况2：React组件中使用Hooks

如果是React项目，在全局布局组件或Logo组件的父组件中使用useDispatch：

import { useEffect } from 'react';
import { useDispatch } from 'react-redux';

function AppLayout() {
  const dispatch = useDispatch();

  useEffect(() => {
    function handleSWMessage(event) {
      const { type, payload } = event.data;
      if (type === 'BACKGROUND_FCM_MESSAGE' || type === 'FCM_NOTIFICATION_CLICK') {
        dispatch({
          type: 'UPDATE_FLAG',
          payload: payload.flagValue
        });
      }
    }

    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.addEventListener('message', handleSWMessage);
      // 组件卸载时移除监听
      return () => {
        navigator.serviceWorker.removeEventListener('message', handleSWMessage);
      };
    }
  }, [dispatch]);

  return <div>...</div>;
}

关键注意事项 #

• 确保Service Worker已成功注册，且页面与SW处于同源环境
• 自定义消息类型（如BACKGROUND_FCM_MESSAGE）要唯一，避免与其他页面通信混淆
• 如果页面处于完全关闭状态，后台消息会触发系统通知，用户点击后才会激活页面并传递消息，需确保通知点击逻辑正确

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