集成Firebase推送通知 - React JS Web应用程序

Question

我正在尝试将Firebase推送通知集成到我的React JS应用中。

我遵循了bellow教程

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

https://github.com/pavelpashkovsky/reeact-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"
        }
    ]
}

Answer 1

创建 firebase-messaging-sw.js public 文件夹并放这个代码

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

在创建 firebase.js 之后，在src文件夹中，并像这样配置firebase

import firebase from 'firebase/app';
import 'firebase/messaging';
const firebaseConfig = {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: ""
};
firebase.initializeApp(firebaseConfig);
export default firebase 

最终将您的代码放在 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
}