ReactJS 的 Firebase 问题

Question

我正在尝试将我的 ReactJs 应用程序连接到 firebase 以实现推送通知。每次我尝试控制台记录我从 firebase 获得的令牌时，总是会出现这个错误，我不知道如何解决它。这是错误的屏幕截图：

我在我的公共文件中的 firebase-messaging-sw.js 中添加了以下几行：

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

firebase.initializeApp({
    messagingSenderId: "msg_id",
})

const initMessaging = firebase.messaging()

还有文件 firebase.js 及其内容，我从已经注册的 firebase 项目中获取配置对象内的数据：

import firebase from "firebase";

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('./public/firebase-messaging-sw.js')
        .then(function (registration) {
            console.log('Registration successful, scope is:', registration.scope);
        }).catch(function (err) {
            console.log('Service worker registration failed, error:', err);
        });
}

const firebaseConfig = {
    apiKey: "AIzaSyAQO5KFxbUnjmoggCRdAkk7wcKXjewRDnU",
    authDomain: "saas-a6939.firebaseapp.com",
    databaseURL: "https://saas-a6939.firebaseio.com",
    projectId: "saas-a6939",
    storageBucket: "saas-a6939.appspot.com",
    messagingSenderId: "1061462994754",
    appId: "1:1061462994754:web:3ef0dcc11942e042cda2db",
    measurementId: "G-6T9DCBJNME"
};

firebase.initializeApp(firebaseConfig);

export default firebase;

这是我尝试打印令牌的 useEffect ：

   useEffect(() => {
        const messaging = firebase.messaging();
        messaging.requestPermission().then(() => {
            return messaging.getToken()
        }).then(token => {
            console.log("TOKEN :", token)
        })
    }, [])

这也是我的 index.js 文件：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Provider } from 'react-redux';
import { store } from './Components/loginPage/Helpers';

const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');

ReactDOM.render(

  <Provider store={store}>
    <App />
  </Provider>,

  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.unregister();

我尝试了许多修复，但没有任何效果，但我仍然遇到同样的错误。我希望任何人都可以帮助我。提前致谢。

Answer 1

您需要从 public 的 firebase-messaging-sw.js 中删除并将 firebase.js 放入一个函数中并在 service-worker.js 中注册

if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('../firebase-messaging-sw.js')
    .then(function (registration) {
        console.log('Registration successful, scope is:', registration.scope);
    }).catch(function (err) {
        console.log('Service worker registration failed, error:', err);
    });}

使用推送通知