Browser support for web push notifications

[JarnDev]

Could you guys provide a list of browsers supported for the push notification for mobile web browsers as well as desktop browsers?

Push notifications are supported by Chrome, Firefox, and Safari on mobile?

[unamashana]

Hey @JarnDev, push notifications now work on all browsers and devices, with iOS support starting iOS16.5. You can try it for yourself at webpushtest.com

However, there is a catch, as we explained on Twitter - https://twitter.com/magicbell_io/status/1667221860432396291?s=61&t=rmvL_Xn8iRaU4e6L9wNTrQ

[unamashana]

The code is public if you'd like to figure out how to build a PWA for your app - https://github.com/magicbell-io/webpush-test.

[JarnDev]

@unamashana I think the disapointed and sob on the text were emoji name not converted to emoji itself....

We have the PWA application... But using the inbox UI provided by you guys, the subscription do not work... thats the issue... were you able to make the inbox UI subscription to work on IOS? Because the webpush-test do not use that UI

Here the UI I'm mentioning: https://github.com/magicbell-io/magicbell-js/tree/main/packages/react

Using that lib, the subscription flow do not works!

[JarnDev]

@unamashana @kgray-MB any update on the provided UI issue?

[moxley01]

@JarnDev reposting my response to you here for public visibility. iOS has somewhat stricter requirements than other platforms, therefore requiring you to host the "subscribe to notifications" button on your own site. Fortunately, we have packages for that:

To achieve iOS notification support, we would recommend using the MagicBell "webpush" (https://github.com/magicbell-io/magicbell-js/tree/main/packages/webpush) library directly. Looking at the webpushtest demo repository to see how it was done there would be a great place to start. In particular, the following files will be relevant:

• https://github.com/magicbell-io/webpush-test/blob/main/src/components/subscriber.tsx
• https://github.com/magicbell-io/webpush-test/blob/main/src/services/subscriptionManager.ts
• https://github.com/magicbell-io/webpush-test/blob/main/public/manifest.json