CODEWITHSUNDEEP
reactjspush-notification
Dinesh Krishnan
Dinesh Krishnan

Reputation: 193

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

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

Upvotes: 15

Views: 38018

Answers (4)

Dinkar Jain
Dinkar Jain

Reputation: 618

I used dynamic imports for solving this issue so that the file is not even evaluated before the feature is detected. I am using firebase SDK 8.2.0. This is how my useEffect function looks like on the top level of my app.

import { isSupported } from "firebase/messaging";

useEffect(() => {
  (async () => {
    const hasFirebaseMessagingSupport = await isSupported();
    if (hasFirebaseMessagingSupport) {
      const { requestForToken } = await import("./api/cloud-notification/firebase");
      await requestForToken();
    }
  })();
}, []);

This is how my firebase connection file looks like ("./api/cloud-notification/firebase"):

import { initializeApp } from "firebase/app";
import { getMessaging, getToken } from "firebase/messaging";

const FIREBASE_VAPID_KEY = "your-firebase-public-vapid-key";

const firebaseConfig = {
  apiKey: 'api-key',
  authDomain: 'project-id.firebaseapp.com',
  projectId: 'project-id',
  storageBucket: 'project-id.appspot.com',
  messagingSenderId: 'sender-id',
  appId: 'app-id',
  measurementId: 'G-measurement-id',
};

initializeApp(firebaseConfig);

const messaging = getMessaging();

const getFirebaseToken = async () => {
  try {
    const currentToken = await getToken(messaging, { vapidKey: FIREBASE_VAPID_KEY });
    if (!currentToken) {
      console.log("No registration token available. Request permission to generate one.");
    }
  } catch (error) {
    console.log("An error occurred while retrieving token. ", error);
  }
};

export const requestForToken = async () => {
  try {
    const permission = await Notification.requestPermission();
    if (permission === "granted") {
      await getFirebaseToken();
    }
  } catch (error) {
    console.log("An error occurred while getting user permission. ", error);
  }
};

Upvotes: 2

A7med Elshaf3i
A7med Elshaf3i

Reputation: 61

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

Upvotes: 6

Jeremy
Jeremy

Reputation: 703

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

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

Upvotes: 16

Sainath
Sainath

Reputation: 366

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.

Upvotes: 23

Related Questions