集成 firebase 推送通知 - React Js web App答案

【问题标题】：Integrate firebase push notification - React Js web App集成 firebase 推送通知 - React Js web App
【发布时间】：2019-11-06 05:12:41
【问题描述】：

我正在尝试将 firebase 推送通知集成到我的 react js 应用中。

我已按照以下教程进行操作

https://dzone.com/articles/how-to-add-push-notifications-on-firebase-cloud-me

https://github.com/pavelpashkovsky/react-fcm

在Token receiving 之前一切正常。然后我尝试使用curl 脚本发送通知，如下所示

curl -X POST -H "Authorization: key=AAAAAJjqjp4:APA91bFeAaBEuHXFbcDPBgFs4p......END2341BK8HLL0uMum4" -H "Content-Type: application/json" \
   -d '{
  "data": {
    "notification": {
        "title": "FCM Message",
        "body": "This is an FCM Message",
        "icon": "/itwonders-web-logo.png",
    }
  },
  "to": "cG9xo6CkVNs:APA91bEd3ypeXN8P-6dbWQWf0.......NOyIytfm"
}' https://fcm.googleapis.com/fcm/send

但我得到以下回应

{
    "multicast_id": 6820287658870793009,
    "success": 0,
    "failure": 1,
    "canonical_ids": 0,
    "results": [
        {
            "error": "AuthenticationError"
        }
    ]
}

【问题讨论】：

标签： reactjs firebase push-notification firebase-cloud-messaging google-cloud-messaging

【解决方案1】：

在 public 文件夹中创建 firebase-messaging-sw.js 文件并把这段代码

importScripts('https://www.gstatic.com/firebasejs/7.22.0/firebase-app.js')
importScripts('https://www.gstatic.com/firebasejs/7.22.0/firebase-messaging.js')


firebase.initializeApp({
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: ""
})

const initMessaging = firebase.messaging()

在 src 文件夹中创建 Firebase.js 并像这样配置你的 firebase

import firebase from 'firebase/app';
import 'firebase/messaging';

const firebaseConfig = {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: ""
};

firebase.initializeApp(firebaseConfig);

export default firebase

finality 把你的代码放在 componentDidMount() 里面的 topbar 像这样

import firebase from './Firebase';

 componentDidMount() {
   
    // start push notifications
    const messaging = firebase.messaging()
    messaging.requestPermission().then(() => {
      return messaging.getToken()
    }).then(token => {
      console.log("Firebase Token Get::", token)
    }).catch((err) => {
      console.log("firebase push notification error::", err)
    })
    // end push notifications

}

【讨论】：