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(func         


        

Answer 1

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 2

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 3

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 4

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

Answer 6

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.