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

Question

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

Answer 1

我的回答是莱昂纳多·卡多佐（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时，我将其添加到公共文件夹中，其内容如下：

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中描述了询问权限和发送通知的实现。

Answer 2

我建议您看一下此sample代码。您可能也想看看本video教程。