Firebase FCM React project issue - firebase-messaging-sw.js wrong type?

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

For those using create-react-app, you can 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 2

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