如何将 fcm 集成到 react js 应用程序中？

Posted 2023-02-22

【中文标题】如何将 fcm 集成到 react js 应用程序中？

【英文标题】：How to integrate fcm in react js application?

【发布时间】：2017-10-09 23:43:22

【问题描述】：

我想将 fcm 集成到 react js 应用程序中以提供实时聊天。有什么要继续的输入吗？

【问题讨论】：

您可以使用FCM JS SDK（在此Quora post 中也提到过）。

@AL。我正在尝试集成它，但我应该在我的代码中在哪里编写所有 getToken、onTokenRefresh 方法。我应该把所有代码放在 index.html 中吗？

【参考方案1】：

我建议你看看这个sample 代码。您可能还想看看这个video 教程。

【参考方案2】：

我的回答是 Leonardo Cardoso 相关文章的简短版本。详情请查看他的article。

将 FCM 添加到 React 应用程序非常简单。我将演示通过create-react-app 生成的项目。当然，以下说明对于所有类型的 React 项目都是可行的。

首先，将Firebase添加到项目中。

npm install firebase --save

然后，我们将创建js 文件来保存我们推送通知的逻辑。让我们将其命名为push.js 并声明内部函数以初始化firebase app。

import firebase from 'firebase';
export const initializeFirebase = () => 
  firebase.initializeApp(
    // taken from your project settings --> cloud messaging
    messagingSenderId: "your messagingSenderId"
  );

我们将在入口点调用这个函数。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import  initializeFirebase  from './push'; <-- add this

ReactDOM.render(<App />, document.getElementById('root'));
initializeFirebase(); <-- add this

为了使用firebase cloud messaging，我们需要一个服务工作者。默认情况下，当您启动Firebase 时，它会查找名为firebase-messaging-sw.js 的文件。有一种方法可以创建和附加您自己的service worker。为简化起见，我们将使用默认方法。

因此，我们需要将firebase-messaging-sw.js 添加到提供文件的位置。当我们使用 create-react-app 时，我将把它添加到 public 文件夹中，内容如下：

importScripts('https://www.gstatic.com/firebasejs/5.8.2/firebase-app.js'); <-- check for last version
importScripts('https://www.gstatic.com/firebasejs/5.8.2/firebase-messaging.js'); <-- check for last version
firebase.initializeApp(
    messagingSenderId: "your messagingSenderId again"
);
const messaging = firebase.messaging();

初始设置已完成。现在您可以添加您想要的功能：请求许可、发送通知或任何其他功能。请求权限和发送通知的实现见the source article。