B4J Tutorial [SithasoDaisy] - PocketBase - How to create a Web Push Notification Server with PocketBase SSE

Hi there

By the end of this, you should be able to have your own Web Push Notification Server running. Below is an example of a notification coming from a cloud deployed PocketBase server.

1671622875015.png


Related Topics

 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
Dependencies

1. PocketBase - you can get it here. I am using a cloud version offered by PocketHost.
2. You will need to create a database collection where you will host your notifications. I call this notifications.

The schema is rather simple...

1671623122861.png


In this collection, we will add subscriptions, so that each time a notification is added / updated, in our app, it shows.

For our webapp to show notifications, the notifications should be allowed and that website page SHOULD BE VISIBLE or pinned.
 

Mashiane

Expert
Licensed User
Longtime User
Client Web App Code - in pgIndex.Initialize

In the client web app, you need to create a pocketbase instance and trap the subsciptions to Notifications.

B4X:
'initialize pocketbase
    pb.Initialize(Me, "pb", "xxxxx", "notifications")
    'define the fiels of the collection
    pb.SchemaAddText(Array("id", "title", "description", "url", "icon"))
    pb.SchemaAddInt1("seconds")
    pb.SchemaAddBoolean(Array("vibrate"))
    pb.Subscribe(Me, "notifications")

As soon as the webapp starts the subscription will fire as this code is in pgIndex > Initialize

We then trap the notification and then show it. Pocketbase subscriptions have create, update and delete actions. We want to trap our changes for create and update only and then show the notification.

B4X:
Private Sub pb_Change (Action As String, Record As Map, TableName As String)
    Select Case TableName
    Case "notifications"
        Select Case Action
        Case "create", "update"
            'a new notification has arrived
            Dim sdescription As String = Record.Get("description")
            Dim sicon As String = Record.Get("icon")
            Dim sseconds As String = SDUIShared.CInt(Record.Get("seconds"))
            Dim stitle As String = Record.Get("title")
            Dim surl As String = Record.Get("url")
            Dim simage As String = Record.Get("image")
            Dim bvibrate As String = SDUIShared.CBool(Record.Get("vibrate"))
            app.ShowBrowserNotification(stitle, sdescription, surl, sicon, simage, bvibrate, sseconds)
        End Select
    End Select
End Sub

In our Pocketbase database, we will a notification in the notifications collection.

1671623680306.png


As soon as we add / update a notifications, our web will show the notification, if the client webapp is running. In our case, its

 

Mashiane

Expert
Licensed User
Longtime User
Opening the Notification Url when user clicks the Notification

We want to open the notification url as soon as the notification is clicked by the user.

In pgIndex, we have this sub on the client app.

B4X:
Private Sub Notification_Click (link As String)
    If link = "" Then Return
    SDUIShared.OpenURLTab(link)
End Sub

This receives the link of the notification and then opens a new tab.

PS: I have noted that this is a hit/miss exercise though, not sure why.
 
Top