Блог

Главная - Вопросы по программированию - Ошибка в обмене сообщениями Firebase cloud в React PWA

Ошибка в обмене сообщениями Firebase cloud в React PWA

#reactjs #firebase #react-router #firebase-cloud-messaging

#reactjs ( реакция ) #firebase #реагировать-маршрутизатор #firebase-cloud-messaging #react-маршрутизатор

Вопрос:

Я пытаюсь добавить 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()

App.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 файл.