reactjs - React PWA 中的 Firebase 云消息传递错误

Question

我正在尝试将 FCM 添加到我的 Reactjs PWA 中，但我无法解决以下错误

这是一个非常基本的应用程序，它从 firebase 获取一些数据并将其显示在屏幕上。

firebase-messaging-sw.js：

importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase-messaging.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);
      });
    }

firebase.initializeApp({
    messagingSenderId: SENDER_ID,
  })

const initMessaging = firebase.messaging()

应用程序.js：

import React from 'react';
import './App.css';
import Routing from './Components/Routing';
import { BrowserRouter } from 'react-router-dom';
import fire from './config/fire';

function App() {
  React.useEffect(() => {
    const msg=fire.messaging();
    msg.requestPermission().then(()=>{
      return msg.getToken();
    }).then((data)=>{
      console.warn("token",data)
    })
  })

  return (
    <BrowserRouter basename={process.env.PUBLIC_URL}>
      <div className="App">
        <Routing />
      </div>
    </BrowserRouter>
  );
}

export default App;

我猜测这是因为它在链接上找不到任何文件，http://localhost:3000/firebase-messaging-sw.js因此默认情况下react-router它正在返回index.html文件。

标签： reactjsfirebasereact-routerfirebase-cloud-messaging