Firebase messaging is not supported in your browser how to solve this?

Question

I am using firebase messaging for web push notification with react. But browser show this message

Messaging: This browser doesn't support the API's required to use the firebase SDK. (messaging/unsupported-browser)

This is code :

const initializedFirebaseApp = firebase.initializeApp({
  apiKey: "XXXXXX",
  authDomain: "XXXXXXX",
  databaseURL: "XXXXXXXXX",
  projectId: "XXXXXX",
  storageBucket: "XXXX",
  messagingSenderId: "XXXXXX",
  appId: "XXXXXX"
});

if (firebase.messaging.isSupported()) {
    let messaging = initializedFirebaseApp.messaging();
}

firebase.messaging.isSupported() is always returning the false. Is there any way I should proceed?

Version for react : 16.8.2 and firebase version : 6.0.2

Answer 1

FCM supports only in localhost and the https enabled sites only. if you want FCM to support you need to either work on localhost or deploy somewhere (you can use firebase).

If you are using proxy using nginx like local.somehost.com cloud messaging doesn't support. To solve this you need to make your local.somehost.com as HTTPS you can install openssl and certificate and key in your nginx.

I think this solves your problem.

Answer 2

In addition to the above explanation you can check if the browser supports messaging by doing:

const messaging = firebase.messaging.isSupported() ? firebase.messaging() : null