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

[Merwan1010]

Well as we told you you just put the *-sw.js file inside the public folder.

[rajasurya7]

@Merwan1010 still getting same issue. Firebase works in localhost ?

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).

[Merwan1010]

Create a github and i will take a look.

[rajasurya7]

Create a github and i will take a look.

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

[rajasurya7]

@Merwan1010 any chance to look on it ?

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

[hsubox76]

Your repro project was missing a lot of files (favicon.ico, src/assets/, .babelrc, main.jsx, index.html, among others) and doesn't build. I'm not sure if you removed them for sharing or if they were never there, or if you updated this project in the last couple months since you posted this, but please try to ensure any future repro project you are providing actually builds.

In any case, after adding all those files, I wasn't getting the 404 error you described, as the file was present at that location. I did get another error: "Registration Failed TypeError: Failed to register a ServiceWorker for scope ('http://localhost:8080/') with script ([service worker url goes here]): ServiceWorker script evaluation failed"

This is because there are syntax errors in your service worker code. The importScripts paths should be pointing at -compat files if you are using Firebase versions above 8.10.1 (that's a documentation failure on our part), and you shouldn't call initializeApp twice. This service worker code works:

importScripts('https://www.gstatic.com/firebasejs/10.7.2/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/10.7.2/firebase-messaging-compat.js');

const firebaseConfig = {
  /** I removed your project details **/
};

firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();

messaging.onBackgroundMessage(payload => {
  const notificationTitle = 'Background Message Title';
  const notificationOptions = {
    body: notificationTitle,
    icon: '<>'
  };

  self.registration.showNotification(notificationTitle,
    notificationOptions);
});

Note this is in your root level firebase-messaging-sw.js. The public/ folder doesn't matter. You can get rid of it and the copy of firebase-messaging-sw.js inside it. It normally would for a basic webpack project, but you have some kind of nx config I'm not familiar with.

Also note this only works in the production build. Something about your nx dev server setup causes it to compile the service worker to something and adds "import.meta", which the browser doesn't like in non-module code. This compilation doesn't happen in the production build. If you want to get to the bottom of that, I suggest trying to get help from nx or a forum that specializes in how to use nx, as it's out of scope of the Firebase SDK.