使用Firebase和ReactJS进行前台和后台通知

如何解决使用Firebase和ReactJS进行前台和后台通知

我正在尝试将我的react应用程序与Firebase集成以实现推送通知。我的src文件夹中包含所有配置的firebaseInit.js：

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

const config = {
    apiKey: "API_KEY",authDomain: "MY_DOMAIN",databaseURL: "DATABASE_URL",projectId: "PROJECT_ID",storageBucket: "STORAGE_BUCKET",messagingSenderId: "SENDER_ID",appId: "APP_ID",measurementId: "MEASURE_ID"
};

let messaging = null

if (firebase.messaging.isSupported()) {
    firebase.initializeApp(config)
    messaging = firebase.messaging()
}
else {
    console.log('no-support :(')
}
const messaging = firebase.messaging();

export const requestFirebaseNotificationPermission = () =>
    new Promise((resolve,reject) => {
        messaging
            .requestPermission()
            .then(() => messaging.getToken())
            .then((firebasetoken) => {
                resolve(firebasetoken);
            })
            .catch((err) => {
                reject(err);
            });
    });

export const onMessageListener = () =>
    new Promise((resolve) => {
        messaging.onMessage((payload) => {
            resolve(payload);
        });
    });

在我的公用文件夹中，有一个名为firebase-messaging-sw.js的文件，如下所示：

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

const config = {
    apiKey: "API_KEY",measurementId: "MEASURE_ID"
};

firebase.initializeApp(config);
const messaging = firebase.messaging();

messaging.onBackgroundMessage(function (payload) {
    console.log('[firebase-messaging-sw.js] Received background message ',payload);
    const notificationTitle = payload.notification.title;
    const notificationoptions = {
        body: payload.notification.body,};
    return self.registration.showNotification(notificationTitle,notificationoptions);
});

而且，这是我实现在App.js中执行推送通知的功能的方法：

 // Load the FCM configuration parameters and activate the push notifications through the app
        requestFirebaseNotificationPermission()
            .then((firebasetoken) => {
                // eslint-disable-next-line no-console
                console.log("CHECK_FCM_TOKEN",firebasetoken);
                this.setState({ fcmToken: firebasetoken })
            })
            .catch((err) => {
                return err;
            });

这里的问题是，当我在应用程序上时，所有后台通知都可以正常运行，而前台通知似乎根本无法正常运行。问题可能在哪里以及如何解决？

谢谢。