Push notifications in Apple Safari with FCM

Question

We implemented push notifications using FCM in chrome and firefox and it worked fine, but Safari doesn't support Service Workers which is mandatory for FCM.

Did anyone deal with this kind of issues? any suggestions?

Answer 1

While Service Workers now work on Safari, they are not enough.

The documentation says:

The FCM JavaScript API lets you receive notification messages in web apps running in browsers that support the Push API. This includes the browser versions listed in this support matrix.

So the ability to receive messages through FCM depends on the browser implementing the Web Push API, which Web Kit does not.

Safari is built on Web Kit, so doesn't support web push, so that means that Safari can't receive FCM notifications. All browsers on iOS devices are also built on Web Kit (as that is a requirement from Apple), so FCM won't be able to receive messages in any of them either

If you want to test whether the environment your code runs on can receive messages from FCM, you can use this snippet of code:

if (firebase.messaging.isSupported())
  ...
}

---

Update (2023-02-16): WebKit.org just announced support for Web Push in iOS/iPadOS 16.4 beta 1. We're investigating whether this also impacts Firebase Cloud Messaging's ability to deliver to devices with this version.

Answer 2

Safari still does not support Web Push API, thus Firebase Cloud Messaging service.

Here is supported browsers in Firebase: https://firebase.google.com/support/guides/environments_js-sdk#browsers

I'd suggest using .isSupported() instead of other solutions.

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

See the documentation for details on .isSupported().

Answer 3

I'm not sure about this new Safari and Service Workers situation, but I tried to implement FCM push-notifications in my iOS app and had to experience that you need an APN (Apple-Push-Notification) certificate first. I'm not sure if this is needed if you're working with Safari, but I could imagine that Apple also wants it's push notifications first to be redirected to the APN servers.

Answer 4

Apple says that Safari 16 (macos) should now support Push API but I didn't manage to make push API notifications work correctly. I tried firebase messaging web v9 (which should be a wrapper over Push API from what I understand) and it seems to work in background (when delivered by the service worker) but in foreground only receives notifications 3 times, then it stops working.

Answer 5

Here is how I got Safari push notifications to work on IOS 16.4.1 and firebase 9.19.1.

1. Implement the generic notification code and make sure it works on a normal device (not IOS).
2. (Edit - This step doesn't appear to be necessary even though it's mentioned in the documentation) Make sure you call "getToken" on a specific user action like clicking on a button. Otherwise, IOS will not allow it.
3. Make sure you add a manifest.json file that is accessible on the root of your app at "https://yourapp/manifest.json". If you are using angular, you can add a route in the angular.json assets section to expose the file. Example manifest.json:

{
  "name": "test",
  "short_name": "test",
  "description": "test",
  "display": "standalone",
  "theme_color": "#ffffff",
  "icons": [
    {
      "src": "/assets/logo.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/assets/logo.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

4. Update your IOS to 16.4+
5. Enable notifications in Safari. Go to Settings -> Safari -> Advanced -> Experimental Features. Enable both "Notifications" and "Push Notifications".
6. Open your web app on IOS Safari. Click on the share icon and "Add to Home Screen".
7. Close the browser and open the app from the home screen shortcut.
8. Click on the button that will call "getToken". A popup will be displayed from IOS that will ask the user for notification permissions.

Hope that helps!

Answer 6

FCM doesn't support Safari browser.

If you want to integrate PUSH notification for Safari browser, follow this link. Safari has its own mechanism for it.

https://developer.apple.com/library/archive/documentation/NetworkingInternet/Conceptual/NotificationProgrammingGuideForWebsites/PushNotifications/PushNotifications.html#//apple_ref/doc/uid/TP40013225-CH3-SW1