[updated] Webpush Notifications using ONLY Anvil and Python

Good afternoon,

I have been banging my head against the wall for several days trying to get webpush notifications to work on desktop and mobile (ios).

Now i FINALLY got it to work so i am happy to share the application!

Link to live app https://webpush.anvil.app

All code is Python, hence the source code is javascript, but is now “converted” and modified to python and anvil.

To get notifications you simply press the subscribe button and you will get prompted with YES/NO to turn on notifications.
If you want to “reset” the prompting for notifications, press the SSL lock, to the left side of the address bar (at least using Brave on desktop).

If you want to send a message to all subscribers you simply press the send message button.

I have tested the notifications on MacOS using the latest version of Safari, Brave and Google Chrome.
On mobile i have only tested on an iphone 8 and IOS 16.4 using safari. In safari it is important that the website is added to Homescreen.
If you don’t get any notifications on your IOS device you might check out this link https://www.xda-developers.com/how-enable-safari-notifications-iphone/. Since Apple recently released this feature on IOS.

Link to project Anvil | Login

PS
I have updated the links to the project and the live app to a more “stable” version :slight_smile:
I would very much appreciate feedback using other devices and browsers :slight_smile:

Also, there are much more to explore regarding the notification. E.g icon, sound, vibration

5 Likes

Fascinated by this! Going to have a dig in over the next couple of days!

Awesome, thanks for sharing!

It works on Chrome on my Windows PC and on my Pixel 7 Pro.

In safari it is important that the website is added to Homescreen.

Does this mean that the app must be installed as a PWA in order to work on IOS/Safari?

This is great - we should think about adding it to anvil-labs service worker implementation.


One anvil.js coding point is that you don’t need to do anvil.js.await_promise in your example.

If you call a javascript function in python that returns a promise in javascript it will be awaited.

You only ever need anvil.js.await_promise with some more obscure javascript libraries/apis.
Specifically places where you access a Promise stored as a property on an object
e.g. this browser api for animation.

Where you access the finished property which is a Promise.

We use await_promise in the anvil_extras animation module to use this api.


Other note - be careful with your uninstall method
It looks like you’re uninstalling all service worker registrations
This includes the default registration from anvil which handles offline capabilities

the following might be better

        registrations = self.navigator.serviceWorker.getRegistrations()
        for reg in registrations:
            if reg.scope.endswith("_/theme/"):
                reg.unregister()
                self.debug_log(reg)
2 Likes

Wonderful :slight_smile:

Yes that’s correct. Otherwise it seems that the service worker cannot be added.

1 Like

@stucork Thanks for your feedback!

I immediately fixed the unregistration error :slight_smile:

Thanks for the explanation regarding .await_promise. It is very new to me so i will look in to it.

Also, feel free to copy the code if it is useful in the anvil-labs :slight_smile:

2 Likes

Did you get any sound (default notification sound) and vibration on your phone?

On iPhone and Safari it seems to be a bug, that there is no sound and vibration on notifications from PWAs

Yes, I did get the default notification sound.

2 Likes