ReactJS - FCM not working in safari browser

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.

score 5 · Answer 1 · answered Feb 17 '20 at 10:06

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

score 2 · Answer 2 · answered Jul 11 '18 at 08:54

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

answered Jul 11 '18 at 08:54

Dimitrij Agal

375
1
9

This seems pretty much the same as the other answer on this question. – André Kool Jul 11 '18 at 08:59
2

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 – Dimitrij Agal Jul 11 '18 at 09:02

score 1 · Answer 3 · edited Jun 20 '20 at 09:12

1

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.

edited Jun 20 '20 at 09:12

Community

1
1

answered May 20 '18 at 14:39

Frank van Puffelen

565,676
79
828
807

2

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? – pkacprzak Aug 15 '18 at 12:34
How did you get around this, for the webpage doesn't load at all. happens only on iOS web browsers. – Nadhir Falta Nov 19 '18 at 05:41

score 0 · Answer 4 · answered Sep 20 '20 at 08:05

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 :(')
}

ReactJS - FCM not working in safari browser

4 Answers4

Linked