[updated] Webpush Notifications using ONLY Anvil and Python

tobias.carlbom · April 22, 2023, 3:44pm

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
I would very much appreciate feedback using other devices and browsers

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

socint · April 22, 2023, 4:32pm

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

stein · April 23, 2023, 4:57am

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?

stucork · April 23, 2023, 6:12am

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.

github.com

anvilistas/anvil-extras/blob/main/client_code/animation.py#L448


      
                  a.playState == "running"
                  for a in el.getAnimations({"subtree": include_children})
              )
          
          

          
def wait_for(animation_or_component, include_children=False):
              """If given an animation equivalent to animateion.wait().
              If given a component, will wait for all running animations on the component to finish
              """
              if hasattr(animation_or_component, "finished"):
                  _await_promise(animation_or_component.finished)
                  return
              el = _dom_node(animation_or_component)
              animations = el.getAnimations({"subtree": include_children})
              _window.Promise.all(list(map(lambda a: a.finished, animations)))
          
          

          
class DOMRect:
              # For autocompletions only
              def __new__(cls, *, x=None, y=None, width=None, height=None, obj=None):
                  if obj is not None:

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)

tobias.carlbom · April 23, 2023, 6:50am

Wonderful

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

tobias.carlbom · April 23, 2023, 6:57am

@stucork Thanks for your feedback!

I immediately fixed the unregistration error

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

tobias.carlbom · April 23, 2023, 9:56am

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

stein · April 23, 2023, 12:34pm

Yes, I did get the default notification sound.

xyloidhead · August 30, 2023, 7:37pm

This looks great, what push provider did you use?

I’m keen to copy this and try some variations, I want to send pushes to individuals rather than all, and don’t think I should be using your API key. Just in case I do something that upsets the provider - I don’t expect to but stuff happens.

tobias.carlbom · September 5, 2023, 4:26am

As i understand in the source documentation, the code actually uses apple, google etc as providers. No need to setup a firebase account.

The one thing needed is the vapid-keys which you can generate here: https://vapidkeys.com/

Sorry its a bit undocumented. But please replace the following:

ServerModule1 => Line 38 => vapid_private_key=“your own private key”
ServerModule1 => Line 40 => “sub”: “mailto:your email address”
Form1 => Line 24 => self.app_server_key = “your public key”

xyloidhead · September 19, 2023, 7:22am

Thanks Tobias. I’ll give that a try as soon as work settles down a bit.

Regards

zielinski.mark · October 3, 2023, 2:51pm

Very cool…

I have opened the app on Chrome on MacOS and allowed notifications, however I did not get the notification on my Mac after pressing “Send Notification” from a different device.

On Android I subscribed and got a browser notification even without installing the PWA.

I know iOS is very restrictive to PWAs and I think still it is necessary to add to Home Screen to get notifications?
However is it also necessary to install the app as a PWA in MacOS to get the notifications?

tobias.carlbom · October 7, 2023, 1:37pm

Hi mark!

Been a long time sense I tested it on my Mac.
But I am quite sure that I got it to work on Safari, Firefox, brave. Not sure about chrome.

Nevertheless have you tried any other browser on your Mac?

It isn’t a requirement that you add the app as a PWA. The only important thing is that you allow the notification to be sent (when you subscribe).

From my experience tinkering with push notifications - it seems to be a lack of support for this type of functionality cross devices and browsers which is sad