ReactJS - FCM not working in safari browser [duplicate]

Question

I am trying to implement FCM push notification in my ReactJS application. It is working in chrome and firefox browser perfectly but facing in an issue in safari browser.

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

I also gone through the documentation of firebase also found that it only supports on only 3 browsers.

• Chrome

• Firefox

• Safari

Is there any method to supports in safari browser as well.

Escort

Answer 1

I was getting error in Safari because FCM is not supported.

Firebase Provides an inbuilt method to check weather FCM supported or not.

    if(firebase.messaging.isSupported()) {
        messaging = initializedFirebaseApp.messaging();
        messaging.usePublicVapidKey(
          "Key"
        );
    }

Pinafore

Answer 2

Safari 11.1 already supported serviceWorker, but it still didn't support PushAPI that is also needed by FCM Javascript API.

Taken from Firebase documentation (https://firebase.google.com/docs/cloud-messaging/js/client) :

The FCM JavaScript API lets you receive notification messages in web apps running in browsers that support the Push API.

Here is the supported browser list: https://caniuse.com/#feat=push-api that states that Safari still not supporting Push API

Glottis

This seems pretty much the same as the other answer on this question. – Gravois

Sorry, this was written because I frustrated after read that Safari now supports serviceWorker but FCM still not functioning. After that, found out that it's not only because of serviceWorker but also Push API, just to help others who wonder why it still doesn't work in latest Safari – Glottis

Answer 3

From the Firebase documentation:

The FCM JavaScript API lets you receive notification messages in web apps running in browsers that provide service worker support. This includes the following browsers:

Chrome: 50+

Firefox: 44+

Opera Mobile: 37+

It seems that Safari is not (yet) supported.

Purse

Is the intended solution for now just to silence the warning and not load Firebase SDK in Safari at all? If yes, what's the recommended way to do this? – Mavilia

How did you get around this, for the webpage doesn't load at all. happens only on iOS web browsers. – Dettmer

Answer 4

Init firebase for 7.20.0+

import firebase from 'firebase/app'
import 'firebase/messaging'

const config = {
  // download from firebase console
}

let messaging = null

if (firebase.messaging.isSupported()) {
  firebase.initializeApp(config)
  messaging = firebase.messaging()
} else {
  console.log('no-support :(')
}

Radiometeorograph