Firebase-js-sdk: firebase-messaging.js broken on iOS Safari 11.1.2

[ecreatures]

We're using firebase messaging with version 5.5.4 in a vue project and Safari 11.1.2 is broken : a blank page is displayed.

The error raised in the console is :
"FirebaseError: Messaging: This browser doesn't support the API's required to use the firebase SDK. (messaging/unsupported-browser)."

Same error on Safari IOS with iOS 11 and 12. Before integrating FDirebase messaging in our project all was working fine. We're currently using other Firebase services in our project and they work fine.

[google-oss-bot]

I found a few problems with this issue:

• I couldn't figure out how to label this issue, so I've labeled it for a human to triage. Hang tight.
• This issue does not seem to follow the issue template. Make sure you provide all the required information.

[ee92]

Just importing firebase/messaging seems to cause this issue for me as well.. Is there a way to do it conditionally based on browser?

update - actually importing didnt cause issue, actually trying to use messaging sdk did.

solution

// importing it
import 'firebase/messaging'
let messaging = null
if (firebase.messaging.isSupported()) {
   messaging = firebase.messaging()
   messaging.usePublicVapidKey("{yourkey")
}
export { messaging }

// actually using it
import { messaging } from 'firebase.js'
FCM() {
   if (!messaging) return
   messaging.requestPermission()
   .then(() => {
      ...
   }
}

[ecreatures]

In theory Firebase messaging is supposed to manage the Safari not able to receive notification case, but in real life it does not. To avoid the Safari blank page, you need to trigger the user agent/browser condition in your code.
Here's a snippet (vue.js) of what we didi each time we needed firebase messaging

if(Notification){
            // Notifications supported! Yay!

            // Init messaging
            const messaging = firebase.messaging()  
            messaging.usePublicVapidKey(<YOUR-PUBLIC-KEY-HER>)

            // Do whatever you need with messaging
    }

[piuskamil]

or just:

try {
      this.messaging = messaging();
    } catch (err) {
      console.log(err);
    }

[mmermerkaya]

Messaging does not work on Safari, because Safari does not support Push API. You can check the compatibility table here.

I'd suggest using .isSupported() instead of the other solutions, as @ee92 mentioned.

if (firebase.messaging.isSupported())
    const messaging = firebase.messaging();
}

See the documentation for details on .isSupported().

[nitesh663]

Thanks a lot @mmermerkaya ...it's really helpful....
I am getting exception while browsing in edge/internet-explorer ...now it's working great.

[wcjord]

Was this resolved? I'm getting the same error in Safari 12.0.2

[andreszs]

Can someone explain why the Safari 12 web push notifications implementation cannot be added to FCM? We know it requires the annoying certificates from the 100-USD-a-year Apple Developers portal, but for those who have them, there should be an updated guide on how to implement it, rather than simply waiting until Apple decides to align with the rest of the browsers (if it ever does).

If an experienced developer created a PR to support Safari 12, would this PR be approved and merged eventually to the FCM JS API?

[mmermerkaya]

Unfortunately this requires more than just changes to this SDK. We also need to support APNs for web in the FCM backend.

The feature request is being tracked here: #1423. There's no information that I can share yet, but that does not mean that we're not working on it.