Firebase cloud messaging: Cannot receive notification in React-js - reactjs

Question

Firebase version: 9.6.6
firebase-messaging.js - inside a src folder
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 - inside a public folder
import { initializeApp } from "firebase/app";
import { getMessaging } from "firebase/messaging/sw";
const firebaseApp = initializeApp({
//api
});
const messaging = getMessaging(firebaseApp);
Inside 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))
When I run the project
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
this error shows up, even though the code is correct according to documentation.
Error persists even if I change the way I import inside firebase-messaging-sw.js file to "importScripts(' ')".
Only after removing everything in firebase-messaging-sw.js file, that error do not show up and I can receive the FCM token.
However, when I send test messages from firebase console to FCM token received in my react app, no messages are showing up in console.
Question: How should I change my code to be able to receive notifications and show them in console or as a notification in browser.

Answer 1

If you're using latest version there is alittle bit modifications in registering service worker file, this is complete process of notification configuration
register service worker as below in your service worker file:
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;
});
}
};
import service worker, and call function in your index.js File:
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();
After this configuration, you will see fire base notification in console, and if firebase-messaging.js file is configured well with no error, your feature will work