[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.