Firebase - Push Notifications FCM Token error

[rajasurya7]

Operating System

Windows 11

Browser Version

Chrome Version 121.0.6167.86

Firebase SDK Version

10.7.2

Firebase SDK Product:

Analytics, Messaging

Describe your project's tooling

Looking for Initialize Push Notifications

Describe the problem

In the React app version 18.2.0 & Node 20.10.0, I am attempting to implement push notifications. After initializing the Firebase console and requesting notification permission from the browser, I encountered the following error. I have already added the firebase-messaging-sw.js file to the root folder.

An error occurred while retrieving token. FirebaseError: Messaging: We are unable to register the default service worker. Failed to register a ServiceWorker for scope ('http://localhost:4200/firebase-cloud-messaging-push-scope') with script ('http://localhost:4200/firebase-messaging-sw.js'): A bad HTTP response code (404) was received when fetching the script. (messaging/failed-service-worker-registration).

Steps and code to reproduce issue

I am attempting to implement push notifications. After initializing the Firebase console and requesting notification permission from the browser, I encountered the following error. I have already added the firebase-messaging-sw.js file to the root folder.

[google-oss-bot]

I couldn't figure out how to label this issue, so I've labeled it for a human to triage. Hang tight.

[hsubox76]

It looks like it's not finding a file at http://localhost:4200/firebase-messaging-sw.js. I don't know how your development server is configured but I think most React apps aren't set up to automatically serve every file in the root folder. I think they usually serve out of a subfolder called "public" or "build". If you navigate to http://localhost:4200/firebase-messaging-sw.js in your browser, do you get a 404? If so I think you just have to put the sw file somewhere that's actually served, and I don't think this is an SDK issue.

If navigating to http://localhost:4200/firebase-messaging-sw.js directly in your browser actually returns a file, maybe you can provide a minimal repro of your project for us to better dig into what's going on.

[Merwan1010]

For React place it on the root of your /public folder.

[rajasurya7]

@Merwan1010 @hsubox76
My React folder structure like below:
Root
-public
--firebase-messaging-sw.js
-src
--firebase.js
--modules
----app
-----app.jsx
-----MainPage.jsx

Code Here:
https://github.com/rajasurya7/react-firebase