如何在 react js 应用程序中集成 fcm?

Question

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

Answer 1

我的回答是莱昂纳多·卡多佐(Leonardo Cardoso)相关文章的简短版本。有关详细信息，请查看他的文章。

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

首先，将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的文件。有一种方法可以创建和附加您自己的服务辅助角色。为简化起见，我们将使用默认方法。

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

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();

初始设置已完成。现在，您可以添加所需的功能：请求权限，发送通知或任何其他功能。源文章中介绍了请求权限和发送通知的实现。

Answer 2

我建议你看看这个示例代码。您可能还想查看此视频教程。