Firebase 云消息：无法在 React-js 中接收通知

Question

Firebase 版本：9.6.6

firebase-messaging.js - 在 src 文件夹中

import firebase from "firebase/compat";
import "firebase/messaging";

const firebaseConfig = {
    //api
};

firebase.initializeApp(firebaseConfig);

const messaging = firebase.messaging();

export const requestForToken = async () => {
    const swRegistration = await navigator.serviceWorker.register(`${process.env.PUBLIC_URL}/firebase-messaging-sw.js`);

    const token = await messaging.getToken({
        serviceWorkerRegistration: swRegistration,
    });

    return token;
};

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

firebase-messaging-sw.js - 在公共文件夹中

import { initializeApp } from "firebase/app";
import { getMessaging } from "firebase/messaging/sw";

const firebaseApp = initializeApp({
    //api
});

const messaging = getMessaging(firebaseApp);

App.js 内部

useEffect(()=> {
        if (!fcm_token) {
            requestForToken()
                .then(r => {
                    console.log("token: ", r);
                    dispatch(setFCMToken(r));
                })
                .catch(error => {
                    console.log("error while receiver fcm token from firebase: ", error)
                });
        } else {
            console.log("fcm token: ", fcm_token);
        }
    }, [])

onMessageListener()
        .then(value => console.log("notification msg: ", value))
        .catch(err => console.log("error: ", err))

当我运行项目时

Failed to register a ServiceWorker for scope ('http://localhost:3000/build/') 
with script ('http://localhost:3000/build/firebase-messaging-sw.js'): 
ServiceWorker script evaluation failed

出现此错误，即使代码根据文档是正确的。

即使我将在 firebase-messaging-sw.js 文件中导入的方式更改为“importScripts(' ')”，错误仍然存在。 只有在删除 firebase-messaging-sw.js 文件中的所有内容后，该错误才不会出现，我才能收到 FCM 令牌。

但是，当我将测试消息从 firebase 控制台发送到我的 React 应用程序中收到的 FCM 令牌时，控制台中没有显示任何消息。

问题：我应该如何更改我的代码才能接收通知并将它们显示在控制台中或作为通知显示在浏览器中。

Answer 1

如果您使用的是最新版本，则在注册 service worker 文件时会进行一些修改，这是通知配置的完整过程

1. 在您的服务工作者文件中如下注册服务工作者：

    export const registerServiceWorker = () => { if ('serviceWorker' in navigator) { navigator.serviceWorker.register('firebase-messaging-sw.js').then(function (registration) { return registration.scope; }).catch(function (err) { return err; }); }

   };

2. 导入 service worker，并在你的 index.js 文件中调用 function：

 import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import { registerServiceWorker } from './serviceWorker'; ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') ); registerServiceWorker();

完成此配置后，您将在控制台中看到 fire base 通知，如果 firebase-messaging.js 文件配置正确且没有错误，您的功能将起作用