[New Plugin] Native Web Push Notifications (supports iOS & no 3rd party service)

[minimumstudio]

Hey everyone!

We just released a new useful plugin - a way to send native push notifications to iOS and Android without having to wrap your app and go through the appstore / playstore. The plugin uses Web 推送协议  |  Articles  |  web.dev to make this possible.

No third party services
Works on iOS & Android
No need to wrap your app

This technology has been around for a while, but since iOS 16.4+ it is finally possible to send push notifications to mobile apple devices, iPhones and iPads. Read the official webkit update here: Web Push for Web Apps on iOS and iPadOS | WebKit

We’ve been using it internally for a few weeks and it feels good enough to release. Of course, if there are any problems you folks run into just post below and we’ll get right on it!

Try the demo out yourself https://web-push-notifications.bubbleapps.io/

Read the docs & setup guide https://web-push-notifications.bubbleapps.io/

Get the plugin here: Web Push Notifications Plugin | Bubble

FAQ & Disclaimer

1. iOS is ONLY supported when:

iOS 16.4+ is installed
Safari is the browser that is used
The app is added to the users’ home screen

2. Currently this plugin only supports push notifications on:

Desktop Chrome, Firefox
Mobile (android) Chrome, (android) Firefox, (iOS) Safari

3. Not receiving notifications on desktop?

Check your alert settings and make sure you are not on do not disturb. Make sure notifications are turned on like this on macOS.

---

Try the demo out yourself https://web-push-notifications.bubbleapps.io/

Read the docs & setup guide https://web-push-notifications.bubbleapps.io/

Get the plugin here: Web Push Notifications Plugin | Bubble

---

We still consider this a beta release, so please bear with us if you run into a problem on a specific device. Please respond to this thread with the problem and we’ll do our best to solve the problem ASAP.

Lastly, we are still working on safari desktop support. It’s close to being ready, but we ran into a few bugs we need to iron out first before calling it ready.

Looking forward to everyone’s feedback!

[Kayami]

we’ve been working on this one for a while - some more context on twitter, other nocode tools are also adding this feature since the iOS 16.4 update → https://twitter.com/yelkhayami/status/1627299401608712192

maybe bubble will add support for this natively at some point, but until then you can get push notifications today without having to wait

[Rangduju]

Thanks for pinning me on Twitter! Consider using this plugin for your PWA maneuvers.

A question should be documented here for SEO: If I already installed service worker via another plugin, should I reinstall it? This might be a silly question as I haven’t actually tested yet.

Also, consider put this forum URL onto the plugin description for easier navigation. #Forum-First

[minimumstudio]

great idea - updated the demo

and regarding the service worker. yes. you can only have 1 service worker so you’ll have to merge the code into 1 service worker. there is no way to do this automatically sadly, but you can ask chatgpt to merge the two service workers and it’ll work

[rlowe012]

Hi @minimumstudio.

When I attempt to subscribe to the push notification, the popup appears on my screen asking to allow notifications. However, when I allow, it’s not returning a push subscription ID.

Any thoughts on what the issue might be? I’m using a chrome browser on windows laptop.

[Kayami]

seems like an issue w the serviceworker setup, your device should definitely be supported if it’s chrome.

can you doublecheck the serviceworker file in the settings and make sure you deployed?

have more time tomorrow to check it out but i would start there, you can verify if the serviceworker file is accessible by just adding /nameofile.js to your bubble app url root

should return the sw script on both test and live!

[rlowe012]

Hey @Kayami . I deployed but I’m getting a 404 error when i go to page appname.com /service-worker.js for both live and test version.

And here’s the code in the sw file…

[Kayami]

can you dm me some more details on your app url so i can help look?

[bartoszkopec89]

Hi
I’m already stuck at the stage:
Next, you’ll need to grab that VAPID public key from earlier (note the part where it says public) and pass it into the plugin.

I can’t find where to type this

[minimumstudio]

Hey there!

Could you send us a DM with a little bit more information of your issue? Would love to help you out and get the plugin working!

Please send us a quick loom with a description of what you’re trying and where you’re stuck!

[julian11]

Thanks for the awesome plugin, @Kayami and @minimumstudio!

I got it to work on Android & desktop, but I’m really struggling with iOS.

I got it to work with your demo on two iOS devices, however, in my implementation on iOS it still shows the Supports Push state as ‘No’.

I already triple-checked everything and have run out of ideas to further debug. Is there any way I can reach you?

[JohnMark]

@minimumstudio

iOS 16.4+

Just to be sure your iOS version is compatible @julian11

[julian11]

Thx, @JohnMark, it is compatible. As I mentioned, I was able to receive pushes on iOS on two separate devices. However, when I recreated it in my app, it’s not working.

One thing I saw that was different was that when I added their demo to my Home Screen (and reopened it from the home screen shortcut) the Safari UI no longer appeared. The nav bar below was gone. However, after I added my app to the Home Screen, the navbar remained. Perhaps that’s a symptom of the underlying problem?

[minimumstudio]

Have you enabled push notifications on your device’s Safari? If you go to Settings > Safari > Advanced > Experimental features, you can find some settings regarding notification and push notifications. Try enabling those? And could you make sure both the Manifest and the service-worker files are both uploaded correctly and do not result in any errors in the console logs?

[julian11]

Thanks for getting back to me, @minimumstudio! The manifest file was missing. I suggest you add it to the instructions.

I also noticed that your demo has the following script/meta tags in the header. Should we be adding these too?

[minimumstudio]

Yes! You’ll need those too!

[apresentadorrfilho]

Good afternoon

I configured the Plugin according to the documentation until then everything was 100% correct and I received the notification…

I’m trying to send the notification to the user who registered to be notified, I did these two settings that are attached but the notification doesn’t reach the users…

I would like to ask for help with this part of the configuration.

[minimumstudio]

Please try using only 1 item in the ‘push subscription’ field. If you want to send a notification to a list of users, please create an API workflow in the backend and schedule that on a list of users. This should fix the issue! Otherwise, please send us a DM and we’ll have another look!

[apresentadorrfilho]

correct!!!
As far as the documentation describes, the plugin created the backend workflow

We fill in the “push subscription” field. as it appears in the Bubble editor, I received the notification correctly… In this case I’m trying to understand how to fill “push subscription” with a payload…?

Making a Workflow in the backend API call I don’t understand…!!

[stefan.h.link]

@minimumstudio I struggled also to get notification setup on my iPhone - and this was exactly the solution. I’d recommend adding this to the user manual for setting up the notification initially.