Push Notifications Dependency

Show and Tell
21

Thank you @hugetim, I understood what divyesh said :slight_smile:

1 Like
22

Push notifications are supported major browsers like Chrome, Firefox and Opera but lacks support for Safari at the moment.

Full chart is available at Push API | Can I use... Support tables for HTML5, CSS3, etc

23

But I’m using Chrome

24

Can you please send me another screen recording showing the error when running in new tab?

25

I cleared the cache data of chrome, and it started working. yay!

1 Like
26

Is this app still active?

I am stuck at Step 3, because the link is broken (“Go to your anvil apps”) and I don’t see where I can upload my yaml file?

27

Is there still a way to create an app from a YAML file?

28

There were some changes to Anvil.

Now, you will have to go to Anvil | Login

1 Like
29

Thank you!

I have copied the example app and loaded the dependency. It seems not to work on iOS devices though (tried both Safari and Chrome). However it works after clearing cache on Android / Chrome and on MacOS / Chrome.
Is there anyone using it with iOS successfully?

30

Last I checked, it wasn’t supported on IOS. So there is no way to make it work.

1 Like
31

This topic is also discussed here: https://anvil.works/forum/t/updated-webpush-notifications-using-only-anvil-and-python/17003

1 Like
32

For iOS try this: https://www.xda-developers.com/how-enable-safari-notifications-iphone/

As for my understanding, Apple will make this a standard feature for iOS.

Also. Last time I tested on iOS (with a different anvil app). I did get a notification but there was no sound. That seemed to be a known bug.

2 Likes
33

Thanks, I will check it.

I guess you only got the notification once you enabled the experimental feature?

34

Yep, I tried what’s written in the link and now the push notifications work, thanks. However until it is on by default for Safari, I don’t think one should rely on it.

I checked Chrome settings in iOS too, but there wasn’t a similar flag. Strange that iOS / Chrome would not allow those notifications by default. Did anybody get it working on their device?

1 Like
35

That’s correct! The service worker will not work otherwise :slight_smile:

1 Like
36

Ok, I see now that if the app is “Added to Home Screen” from Chrome in iOS, you will get the push notifications. I don’t think any flag has to be set for Chrome, just Safari.

It won’t work in the browser, but at least this method seems to work fine.

1 Like
37

Hi @divyeshlakhotia !

I use your dependency a lot on my apps and I have a few question.

First, recently Google send an e-mail about decomissioned services on firebase and the dependency uses two of them, so it will stop working on June 20, 2024. Do you plan on upgrading the dependency to fix this?

Second, on the send() method you can pass a list of buttons that will show on the notification. Is there any way to make the button action to send a background request and close the notification INSTEAD of opening the app? I want to make a notification were people could confirm attendance by clicking on yes or no, but I didn’t want to have to open the app for this.

38

Glad that the dependency is helping you.

  1. Yes I did saw the e-mail as well. Since I also use push notifications in my production, I will upgrade the dependency soon.

  2. Thanks for the suggestion. A simple change in the service worker file can make that possible. Just go the ServerModule of your dependency and replace everything with this

import anvil.server
from . import firebase_config

@anvil.server.http_endpoint('/push_notifications.js')
def return_service_worker():
    js_script=f"""importScripts("https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"),
    importScripts("https://www.gstatic.com/firebasejs/8.10.0/firebase-messaging.js"),
    firebase.initializeApp(
        {firebase_config.firebase_config}
);
const messaging = firebase.messaging();
messaging.onBackgroundMessage((e) => {{
    console.log('New Notif');
    e.data.renotify=true
    console.log(e.data.actions)
    e.data.actions=eval(e.data.actions)
    return self.registration.showNotification(e.data.title, e.data);
}}),
    self.addEventListener("notificationclick", function (e) {{
        e.notification.close();
        action=e.action
        console.log(action);
        if (action){{
            if (action.startsWith('request:')) {{
                fetch(action.replace('request:',''))
            }}
            else {{
                clients.openWindow(action);
            }}
        }}
        else {{
        clients.openWindow(e.notification.data)
        }}
    }});
    """
    print(js_script)
    return anvil.BlobMedia('text/javascript',bytes(js_script.encode()),name='push_notifications.js')

Now, you can just add ‘request:’ to the button action to send a request to it instead of opening it.

For example, if you set the button action to request:https://example.com/_/api/test, a request will be sent to this endpoint instead of opening it.

I will make the changes to the official version too for future users tomorrow.

1 Like
39

Thanks for the quick response!

Good to know that you will be updating the dependency soon.

Also, for the change in the service worker, it didn’t really work for me. It still opens a new tab and now it opens with the “request:” text in front.

Actually, it appears to ignore any change in the js part of the service worker. I even almost deleted everything and it still works opening the tab as if no changes were made. Any ideas of what could it be?

Edit: Nevermind… it just magically started working on my phone (however still doesn’t work on my computer, maybe it needs to clear cache for the site / installed app?)

40

Have you try Empty Cache and hard reload?