B4J Tutorial [SithasoDaisy] 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.

Related Topics

[BANano] Using PocketBase (Firebase Alternative) for your Apps.

Hi there. I got to test the "Open Source backend for your next SaaS and Mobile app in 1 file" tech stack today. I must say its a very interesting project. I downloaded a single file from the PocketBase website, opened my command prompt. Executed "pocketbase serve" where I unzipped the file...

www.b4x.com

 

[Mashiane]

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

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]

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.

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

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.

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

SithasoDaisy: TailwindCSS Websites using B4X.

SithasoDaisy: TailwindCSS Websites using B4X.

sithasodaisyui.netlify.app

 

[Mashiane]

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.

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.

 

[Mashiane]

Extending the example

1. One can add functionality to create the UI to create / update / delete notifications.
2. One can save the received notification to localstorage and then show it or save its reference and manipulate it later.

Happy SithasoDaisy coding..