Firebase FCM React Project issue - is firebase-messaging-sw.js the wrong type?

Question

I am trying to get Firebase FCM to work in my React project (using webpack)

When trying to getToken () to use:

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

An exception is thrown as follows:

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

I understand that this problem is related to the missing working user file: firebase-messaging-sw.js, which I added to the root of the project, but I still get the same error.

I'm not sure what I'm doing wrong here, I created a vanilla java script project and it works fine.

Any ideas on this issue?

Answer 1

, create-react-app, firebase-messaging-sw.js index.js :

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

, firebase-messaging-sw.js. . , - Firebase:

onMessage, Firebase firebase-messaging-sw.js.

Answer 3

, .

node , firebase-messaging-sw.js , express . :

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

, firebase-messaging-sw.js /dist.

Answer 4

, , 3 . ReactJS Webpack. , firebase-messaging-sw.js, , .

-, , , , ...

.

I managed to solve the registration problem by installing the webpack plugin called sw-precache-webpack-plugin. This plugin automatically creates a service employee file for you in your build directory.