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

Answer 3

isSupported() in version 9 return Promise so you should wait for resolving

const messaging = (async () => {
try {
    const isSupportedBrowser = await isSupported();
    if (isSupportedBrowser) {
        return getMessaging(config);
    }
    console.log('Firebase not supported this browser');
    return null;
} catch (err) {
    console.log(err);
    return null;
}
})();

If you are using version 9 you should pass messaging to (onMessageListener resolver and getToken )

onMessageListener

export const onMessageListener = async () =>
new Promise((resolve) =>
    (async () => {
        const messagingResolve = await messaging;
        onMessage(messagingResolve, (payload) => {
            // console.log('On message: ', messaging, payload);
            resolve(payload);
        });
    })()
);

getToken

export const requestForToken = async (dispatch) => {
try {
    const messagingResolve = await messaging;
    const currentToken = await getToken(messagingResolve, {
        vapidKey: *your FCM APP SERVER KEY*,
    });
    if (currentToken) {
        *your code*
    }
} catch (err) {
    console.log('An error occurred while retrieving token. ', err);
}
};