React Native安卓端按钮触发后向网页发送通知的实现方法

你查到的Firebase Notifications（实际核心是FCM，Firebase云消息服务）完全能满足这个需求，不需要自己搭建长连接服务，全流程按下面步骤配置即可，全程不需要依赖第三方跳转服务。

前置配置：Firebase项目初始化 #

• 打开Firebase控制台新建项目，可跳过Google Analytics绑定，创建完成后进入项目面板
• 分别给你的React Native端、自有网页端注册应用：
  • RN端选择对应Android/iOS应用入口注册，按控制台指引把google-services.json（安卓）、GoogleService-Info.plist（iOS）放到RN项目的对应原生目录
  • 网页端选择Web应用入口注册，保存好生成的Web端初始化配置对象，后面网页开发要用
• 进入控制台Cloud Messaging板块，开启V1发送接口，生成服务账号密钥文件存到你自己的服务端，绝对不要把这个密钥放到RN前端代码或者网页前端代码里，会被反编译/爬取导致权限泄露

RN端按钮逻辑实现 #

• 先安装依赖：执行npm install @react-native-firebase/app @react-native-firebase/messaging，iOS端进入ios目录执行pod install完成原生依赖关联，安卓端按控制台指引修改build.gradle配置即可
• RN应用首次启动时申请通知权限：安卓13及以上需要动态申请POST_NOTIFICATIONS权限，iOS端会弹出系统权限申请框，用户同意后才能正常使用消息能力
• 按钮点击事件不要直接调用FCM发送接口，只需要请求你自己的后端触发接口即可

必须走自有后端转发的原因：FCM发送接口需要服务账号密钥鉴权，如果把密钥放在前端，任何人反编译APK、扒取网页源码都能拿到密钥，随意给你的所有用户推送消息，有严重安全风险

• 按钮点击核心代码示例：

// 按钮按下的回调函数
const handlePress = async () => {
  try {
    // 请求自有后端的触发接口
    await fetch('你的后端触发接口地址', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({
        type: 'trigger_web_notice',
        text: '功能正常运行'
      })
    })
  } catch (err) {
    console.error('触发失败', err)
  }
}

自有网页端接收配置 #

• 网页端引入Firebase JS SDK，用之前保存的Web端配置初始化Firebase App，同时初始化Messaging模块
• 在你网页的域名根目录存放firebase-messaging-sw.js服务工作线程文件，配置基础的消息监听逻辑，保证网页切后台时也能收到消息
• 网页初始化完成后，会生成当前浏览器对应的FCM注册token，把这个token上报到你的自有后端存储，后端发消息时直接指定这个token为接收目标即可
• 网页收到消息后直接触发自身的提示逻辑即可，核心代码示例：

import { getMessaging, onMessage } from "firebase/messaging";
const messaging = getMessaging();

// 监听前台收到的消息
onMessage(messaging, (payload) => {
  const noticeContent = payload.data.text;
  // 替换成你自己网页的提示逻辑，比如弹toast、在页面固定区域插入文字
  renderNotice(noticeContent);
});

服务端发送逻辑实现 #

• 服务端引入Firebase Admin SDK，用之前下载的服务账号密钥完成初始化鉴权
• 收到RN端发来的触发请求后，调用Admin SDK的消息发送方法，指定存储的网页端token为接收方，把「功能正常运行」作为消息内容下发即可，Node.js环境示例代码：

const admin = require('firebase-admin');
const serviceAccount = require('./你的服务账号密钥文件.json');
admin.initializeApp({
  credential: admin.credential.cert(serviceAccount)
});

// 收到RN触发请求后执行发送
const sendNoticeToWeb = async () => {
  const message = {
    data: { text: '功能正常运行' },
    token: '后端存储的网页端FCM token'
  };
  try {
    const res = await admin.messaging().send(message);
    console.log('发送成功', res);
  } catch (err) {
    console.error('发送失败', err);
  }
}

常见踩坑点 #

• 本地调试网页时，要在Firebase控制台Web应用的授权域名列表里加上本地调试地址（比如http://localhost:5173），否则拿不到FCM token
• iOS模拟器不支持FCM消息接收，测试iOS端必须用真机
• 用户清除浏览器数据后，之前存储的网页token会失效，需要在网页每次加载时重新上报最新token，避免消息发送失败
• 如果你只需要网页在前台打开时收到消息，不需要后台推送能力，可以不用配置服务工作线程，前台监听逻辑就能满足需求

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