Getting issue in generating Firebase token in React JS application - firebase

Question

importScripts("https://www.gstatic.com/firebasejs/9.8.3/firebase-app-compat.js");
importScripts("https://www.gstatic.com/firebasejs/9.8.3/firebase-messaging-compat.js");
// Initialize the Firebase app in the service worker by passing the generated config
const firebaseConfig = {
apiKey: "AIzaSyDk4dYeydr4q3npWx4iqKWejq33r1E",
authDomain: "tengage-33e12.fireeapp.com",
projectId: "tengage-33e12",
storageBucket: "tengage-33e12.appspot.com",
messagingSenderId: "1076165210",
appId: "1:1076165210:web:c9560924940a068ce3",
measurementId: "G-5FMCR8M0G8",
};
firebase.initializeApp(firebaseConfig);
// Retrieve firebase messaging
const messaging = firebase.messaging();
messaging.onBackgroundMessage(function (payload) {
console.log(" message ", payload);
const notificationTitle = payload.notification.title;
const notificationOptions = {
body: payload.notification.body,
};
self.registration.showNotification(notificationTitle, notificationOptions);
});
I have one React js project in which I have to integrate the FCM.
I have added firebase-messaging-sw.js in public folder.
and added the firebbase dependency also.
when I am trying to get token i am getting the error.
SecurityError: Failed to register a ServiceWorker for scope ('http://localhost:3005/') with script ('http://localhost:3005/firebase-messaging-sw.js'): The script has an unsupported MIME type ('text/html').
But with the same firebase credentials when I tried to get the token in the newly created application its giving the token.

Answer 1

The error that is mentioned may occur due to a few reasons , one of which could be an error in the design pattern or syntax. However, it means that any requests for unknown text files initially get redirected to index.html, and therefore return with the MIME type of "text/html", even if it's actually a JavaScript or SVG or some other kind of plaintext file.
Refer below for example:
// Load React App
// Serve HTML file for production
if (env.name === "production") {
app.get("*", function response(req, res) {
res.sendFile(path.join(__dirname, "public""index.html"));
});
}
You may try to add a specific route for service-worker.js before the wildcard route:
app.get("/service-worker.js", (req, res) => {
res.sendFile(path.resolve(__dirname, "public", "service-worker.js"));
});
app.get("*", function response(req, res) {
res.sendFile(path.join(__dirname, "public", "index.html"));
});
Now, when the browser looks for service-worker.js, it will return it with the correct MIME type.
(Note that if you try adding the service-worker.js route after the wildcard, it won't work because the wildcard route will override.)
You also may want to check if the URL http://localhost:3005/firebase-messaging-sw.js, is getting served and its MIME type from the browser interface.
Also , please make sure that the service worker file is generated (Chrome DevTools -> Sources -> Filesystem). You may receive such an error if the above example service-worker.js file is not generated at all (check your deployment script).
You may also refer the links below for more insight:
[1] : https://firebase.google.com/docs/cloud-messaging/js/client#access_the_registration_token
[2] : https://firebase.google.com/docs/cloud-messaging/server
[3] : FCM getToken() Failed to register a ServiceWorker for scope error Flutter web