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 ?

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

Solution 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

Solution 3

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!

Solution 4

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.

Solution 5

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.

View more solutions

Comments

[Sean]

In react, insn't the service handled when calling import firebase from 'firebase'? It looks like firebase-messaging-sw.js imports what I already have imported.... Can you elaborate please?

[Luiz Fernando da Silva]

it also worked for me at react with create-react-app tool. Just placing the sw file in the /public

[Baum mit Augen]

This does not provide an answer to the question. You can search for similar questions, or refer to the related and linked questions on the right-hand side of the page to find an answer. If you have a related but different question, ask a new question, and include a link to this one to help provide context. See: Ask questions, get answers, no distractions

[Mirko Flyktman]

My bad, I just want this question to get attention to get a possible solution. Should I remove the answer and add it as a comment or something?

[Baum mit Augen]

This post should be removed, yes. Concerning the attention: The best way to do that would be setting a bounty, but that requires 75 reputation. Posts like this and comments are unlikely to help in this regard.

[Bola]

Put service worker in folder where static content is served?

[Sobhani]

React+Vite and Vue+Vite deployed in vercel or netlify => make a folder public in the top root of project , create firebase-messaging-sw.js inside the folder, and by following the above method worked for me. Thanks.