Firebase FCM React project issue - firebase-messag

Question

Im tryin to get Firebase FCM working in my React project(using webpack )

When trying to getToken() using:

 messaging.requestPermission()
  .then(function() {
    console.log('Notification permission granted.');
    return messaging.getToken();
  })
  .then(function(token) {
    console.log('token')
  })
  .catch(function(err) {
    console.log('Unable to get permission to notify.', err);
  });

the exception is thrown as follows:

browserErrorMessage: "Failed to register a ServiceWorker: The scrip 
has an unsupported MIME type ('text/html')

I understand that this issue is related to the missing service worker file: firebase-messaging-sw.js, which I added to the root of the project but I'm still getting the same error.

Im not sure what im doing wrong here, i've set up vanilla java script project and it works fine ....

Any ideas about this issue ?

Answer 1

I have the same exact problem as in the original question, and I have gone through all kinds of solutions without any luck over the past 3 days. I am using ReactJS and Webpack. I've tried to include file called firebase-messaging-sw.js in my root folder, but it does nothing.

Someone, please help, since the firebase notification is a much needed feature in the project I am developing...

EDIT.

I managed to solve the registration problem by installing a webpack plugin called sw-precache-webpack-plugin. This plugin autogenerates a service-worker file for you into your build directory.

Answer 2

If you are using firebase, react and you scaffold with create react app things you need to do:

• create (or move) a file in the public folder name it firebase-messaging-sw-.js
  • this issue is because the default route is your root folder, but since the scaffolder uses webpack you can't put the simple file in your root folder, it got to be placed in your public folder or do some config in your webpack dev server to be able to load that file from a different route
• register your service worker and associate that file with firebase
• you can do this in the index file (bootstrap)
• Check that your service worker has been registered in your browser
• for chrome you go to Devtools > Application > ServiceWorker and check yours is register
  • if you have any issue delete you service worker and register it again

(based on @Humble Student answer)

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('../firebase-messaging-sw.js')
    .then(function(registration) {
        firebase.messaging().useServiceWorker(registration);
    }).catch(function(err) {
      console.log('Service worker registration failed, error:', err);
    });
  }

Hope that helps!

Answer 3

In order to receive messages, you will need to create a file called firebase-messaging-sw.js. See the section Handle messages when your web app is in the foreground in the Firebase documentation:

In order to receive the onMessage event, your app must define the Firebase messaging service worker in firebase-messaging-sw.js.

Answer 4

If you are using create-react-app. Add firebase-messaging-sw.js to your public folder and rebuild. firebase-messaging-sw.js can be an empty file

Answer 5

For those using create-react-app, you an create the firebase-messaging-sw.js inside public folder and, on index.js add:

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);
  });
}

Answer 6

The issue here was that my project setup didn't 'see' service worker file.

Since i'm using node with express, the firebase-messaging-sw.js had to be place where express is picking up static content. In my case line:

server.use(Express.static(path.join(__dirname, '../..', 'dist')));

means that I had to put firebase-messaging-sw.js into /dist folder.