javascript - Adding Firebase FCM to reactjs app - Stack Overflow

admin管理员组

文章数量:1430527

I am trying to send push notifications to users in my reactjs app. I have added firebase, requested user for notification permission. That's working.

But now I want to register device token. But it's giving me error:

Messaging: We are unable to register the default service worker. Failed to register a ServiceWorker: The script has an unsupported MIME type ('text/html'). (messaging/failed-serviceworker-registration)

Where to add firebase-messaging-sw.js file? How to register a service worker in react app?

Here is the code I am using to register device token:

messaging.getToken()
      .then(function(currentToken) {
        if (currentToken) {
         // sendTokenToServer(currentToken);
         // updateUIForPushEnabled(currentToken);
        } else {
          // Show permission request.
          console.log('No Instance ID token available. Request permission to generate one.');
          // Show permission UI.
        //  updateUIForPushPermissionRequired();
        //  setTokenSentToServer(false);
        }
      })
      .catch(function(err) {
        console.log('An error occurred while retrieving token. ', err);
        //showToken('Error retrieving Instance ID token. ', err);
        //setTokenSentToServer(false);
      });

Note: It's not react native but a web app.

I am trying to send push notifications to users in my reactjs app. I have added firebase, requested user for notification permission. That's working.

But now I want to register device token. But it's giving me error:

Messaging: We are unable to register the default service worker. Failed to register a ServiceWorker: The script has an unsupported MIME type ('text/html'). (messaging/failed-serviceworker-registration)

Where to add firebase-messaging-sw.js file? How to register a service worker in react app?

Here is the code I am using to register device token:

messaging.getToken()
      .then(function(currentToken) {
        if (currentToken) {
         // sendTokenToServer(currentToken);
         // updateUIForPushEnabled(currentToken);
        } else {
          // Show permission request.
          console.log('No Instance ID token available. Request permission to generate one.');
          // Show permission UI.
        //  updateUIForPushPermissionRequired();
        //  setTokenSentToServer(false);
        }
      })
      .catch(function(err) {
        console.log('An error occurred while retrieving token. ', err);
        //showToken('Error retrieving Instance ID token. ', err);
        //setTokenSentToServer(false);
      });

Note: It's not react native but a web app.

• javascript
• reactjs
• firebase
• firebase-cloud-messaging

Share Improve this question Follow edited Oct 2, 2017 at 9:52 KENdi 7,78922 gold badges1818 silver badges3131 bronze badges asked Oct 2, 2017 at 8:44 Noman AliNoman Ali 3,3401313 gold badges4747 silver badges7979 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

I have added firebase-messaging-sw.js file into my public directory (with index.html) file. That resolved the issue.

See more at this post

本文标签： javascriptAdding Firebase FCM to reactjs appStack Overflow