Individual Push notifications for a PWA

I have a PWA mobile app for our clients. I would like to send them push notifications as reminders for upcoming appointments. Has anyone done this and did you use a third party service?

I would need to be able to manually send the notification from our internal dashboard.

Any direction would be appreciated. :beers:

Checkout Onesignal Wappler Custom Extensions , I use one signal everywhere, Wappler, React/go, Expo, etc! :slightly_smiling_face:

Thanks, I'm not too keen on using a Wappler extension as I need to make sure this has a lengthy life-span of at least the next 7 years.

Have you used One Signal without the Wappler extension? And how do you be sure that the user has the PWA installed?

Take a look to this video shared by ben:

Don't know if it's the same, but the logic I use in Android push notification:

  1. Generate a token or load it from an external service (In my case for capacitor/android: firebase)
  2. On login, send that token

Have a look at Push notification - OneSignal

Theoretically, you need no custom extensions for this! Think of it, like explained by @franse , when user agrees to push notifications you save theirs subscription or player id to database along side users information! Whenever you need to trigger a push notification, you simply call the push endpoint with their notification id in mind, and Voalia! Super easy !

1 Like

You suggesting i may die soon.:rofl::rofl::rofl:

5 Likes

Haha, no of course not! But at the rate Wappler changes the chance of an extension breaking is inevitable.

Looks like Progressier has an API to set it up. I already use Progressier for the PWA and global push notifications. Have to see if I can wrap my head around the API and the coding.

ANyone using Progressier ever set up targeted push notifications?

I asked the Wappler team if they had any plans to integrating OneSignal into Wappler before producing the extension. They said no.

Yes! Super easy! I a had a script somewhere, that upon login generates a notification id and pushes it to progressier! Progressier already has the ability to assign the id or tas( so you can send them to groups). So the flow goes like this progressier fetches the id, saves it to its database that attaches it to the device (you can also use emails, easier to recognise but not recommended, id always opt in for the uuid or anything else more unique), when pushing notification target that particular user id and you’re there! You can always use AI to generate you a script that would push the unique identifier to progressier!

Ultimately, what I would like to do is have a subscribe to push notification setting in my PWA. And then send notifications through our internal dashboard. Or does it have to be sent from the Progressier portal?

Please see Progressier | No-Code PWA & Web Push Toolkit

Oddly I believe it’s login protected route, so you need to be logged in to see the documentation, but if you have them, you simply follow their instructions and you send push notifications programatically. Now, please pay attention to the “notify one specific user” section, this will explain the part that I was talking to you about! Where we’re using notifications id(generated and stored within database AND progressier, that’s how it knows which user’s device to trigger), and use that id within recipient parameter and you’re done! All done within Wappler, browser, anywhere!

2 Likes

Also, once you have the script in and the worker set, it trigger subscribe to notifications within your app automatically, now, to assign user data, you will need a custom JavaScript script, that call progressier function that attached any information you want, such as email etc. to their database. However, I would caution you to use personal information for identifiers since they’re stored in progressier database, hence the UUID that works well identifying your user base with progressier data, but I believe they have introduced that too, some time ago, to make the things easier!

1 Like

Hi Brad,

I use Progressier API to send individual push notifications. Progressier provides 3 options to identify a user: id, email or tags. In my case, I assign a user_uuid to all new users and then update Progressier by sending this uuid on success of user login API.

This is the JS function to update Progressier push notification data connector. You can use email or tags as well.

// Push users user_uuid to Progressier dashboard
function progressierId(userUUID) {
    try {
        progressier.add(
            {
                id: userUUID
            }
        );
    } catch (error) {
        //ignore
    }
}

I call this function like this.

<dmx-serverconnect id="sc_user_logged_in" url="/api/1/0/Security/user_logged_in" dmx-on:success="run({runJS:{name:'progressierId',outputType:'text',function:'progressierId',args:[`sc_user_logged_in.data.q_user_logged_in.details[0].user_uuid`]}})"></dmx-serverconnect>

You will need this information to use the API:

Progressier Url (to send)
Method: Post
Data Type: JSON
Headers: authorization (Bearer YourAPIkey), content-type (application/json)

Then send a message to the individual user via API by setting up JSON Data as below.

{
  "recipients": {
    "id": "{{$_POST.user_uuid}}"
  },
  "title": "{{$_POST.title}}",
  "body": "{{$_POST.message}}",
  "url": "https://abc.com/home"
}
1 Like

This is very helpful @guptast . Thank you so much. It reaffirms that what I want to do is possible. I too prefer to use the client ID as the identifier. I have bookmarked your response.

I think it makes a bit of sense to me. I am sure I will have questions. Again, I very much appreciate your response and help.

What I don't get is where do I enter this code and how does it know to add it to Progressier?

1 Like

You're welcome, Brad.

Could you please clarify which code you're referring to?

My understanding is that Progressier maintains device ID internally whenever PWA is run and accessed in a browser, and Progressier add id script matches this device ID with the unique user id.

Oh I forgot to post the code

function progressierId(userUUID) {
    try {
        progressier.add(
            {
                id: userUUID
            }
        );
    } catch (error) {
        //ignore
    }
}```

Got it. This code can be added in the custom.js or a similarly named file.

1 Like

Ok, it' starting to make a bit of logical sense. What happens if the user un-installs the PWA? Under this method I would assume they would still get the push notifications?

If the PWA is uninstalled, the push notifications will also stop on that device. Additionally, a user has to allow / subscribe to receive push notifications.

So, if a user has installed the PWA but doesn't allow to receive push notifications, then the notifications won't be delivered. This doesn't break the push notification API, it just means that there's no end user to receive the notification.

1 Like

Interesting. So i have to keep the global push notification request in play. Right now I have it set that a user can recieve push notifications but I can only send them to everybody through the Progressier portal.