B4J Question [ABMaterial] [Solved]Push.js Notifications

[Philip Chatzigeorgiadis]

Could anyone please post a small tutorial or provide any help on how to use Push.Js notifications with ABMaterial?

I found the idea about Push.Js in this post by @mindful :

you could use https://nickersoft.github.io/push.js/ as it's easy to use and works with most modern browsers ...

here
https://www.b4x.com/android/forum/threads/abmaterial-framework-for-webapps.60072/page-24#post-477244

but, so far, I have been unable to incorporate push notifications in my apps.

 

[Mashiane]

You can either create a custom component for this though I think that would be an overkill. Use AddextrajavascriptFile and add the push.js file to the page. Add a button to the page on connectpage then on the button click event call page.ws.evaluate(''push('hello')).. this is just to give an idea I'm not on my laptop..

 

[Philip Chatzigeorgiadis]

You can either create a custom component for this though I think that would be an overkill. Use AddextrajavascriptFile and add the push.js file to the page. Add a button to the page on connectpage then on the button click event call page.ws.evaluate(''push('hello')).. this is just to give an idea I'm not on my laptop..

I have tried your suggestion with no result.
I tried both page.ws.eval and page.ws.runfunction
Note that you you must call "push.create('hello')" - I do not know if this changes the situation, as my javascript knowledge is next to nil.

 

[Mashiane]

@Philip Chatzigeorgiadis , tell me, isnt the existing .ShowToast method in ABM not sufficient for you to achieve what you need?

 

[Mashiane]

@Philip Chatzigeorgiadis , ohk, I've managed to get this to work. I think you can then try and get the rest of the options working. I think I understand now. It's kinda cool that the notifications shows 'outside' the browser window. i'm sure it can be set for other options to do more.

Reproduction:

In BuildPage...

'push.js
    page.AddExtraJavaScriptFile("https://cdnjs.cloudflare.com/ajax/libs/push.js/1.0.5/push.js")

In ConnectPage, I created a button so that when clicked will raise the Push.

Dim btn As ABMButton
    btn.InitializeRaised(page,"pushit","","","Push","")
    page.cell(2,1).AddComponent(btn)

The Button Click Event..

Sub pushit_Clicked(Target As String)
    Dim title As String = "Mash Testing Push.js!"
    Dim body As String = "Let's hope this works perfectly!"
    Dim icon As String = "../images/32.png"
    Dim pausefor As String = "5000"
    Dim pushIT As String
    pushIT = $"Push.create("${title}", {
            body: "${body}",
            icon: "${icon}",
            timeout: ${pausefor},
            onClick: function() {
                console.log(this);
            }
        });"$
    page.ws.Eval(pushIT,Null)
    page.ws.Flush     
End Sub

This though it like now the current toasts work inside ABM. So you have it, good luck.

 

[Mashiane]

PS: This first asks the user to confirm if they want to receive notifications. Whilst I'm not sure what you want to do with this (you can share your ideas if you want so that we can learn), from what has happened here, it does work and then you can tweak it for your like. I had to google this to find other examples of how this was being used and came across the cloudfare cdn.

 

[Philip Chatzigeorgiadis]

PS: ... Whilst I'm not sure what you want to do with this (you can share your ideas if you want so that we can learn), ....

The ToastMessages of ABM are only shown inside the browser window. I want my users to be notified of certain events (e.g. a new order added in the production schedule), even if their browser is minimized - i.e. the same concept of receiving notifications about new emails.

 

[Philip Chatzigeorgiadis]

@Philip Chatzigeorgiadis , ohk, I've managed to get this to work. I think you can then try and get the rest of the options working. I think I understand now. It's kinda cool that the notifications shows 'outside' the browser window. i'm sure it can be set for other options to do more.

View attachment 67068

Reproduction:

In BuildPage...

'push.js
    page.AddExtraJavaScriptFile("https://cdnjs.cloudflare.com/ajax/libs/push.js/1.0.5/push.js")

In ConnectPage, I created a button so that when clicked will raise the Push.

Dim btn As ABMButton
    btn.InitializeRaised(page,"pushit","","","Push","")
    page.cell(2,1).AddComponent(btn)

The Button Click Event..

Sub pushit_Clicked(Target As String)
    Dim title As String = "Mash Testing Push.js!"
    Dim body As String = "Let's hope this works perfectly!"
    Dim icon As String = "../images/32.png"
    Dim pausefor As String = "5000"
    Dim pushIT As String
    pushIT = $"Push.create("${title}", {
            body: "${body}",
            icon: "${icon}",
            timeout: ${pausefor},
            onClick: function() {
                console.log(this);
            }
        });"$
    page.ws.Eval(pushIT,Null)
    page.ws.Flush    
End Sub

This though it like now the current toasts work inside ABM. So you have it, good luck.

Works great!
Thank you!

 

[Philip Chatzigeorgiadis]

Alternative approach:
Copy attached push.min.js file to www/js/custom folder.
In BuildPage sub add:

page.AddExtraJavaScriptFile("../custom/push.min.js")

 

[Mashiane]

Nice, I have created a method that one can also pass a tag to it. This raises two events, onClick and OnError..

Sub PushIt(page As ABMPage, pTitle As String, pBody As String, pImage As String, pPause As String, pTag As String)
    If pPause = "" Then pPause = "5000"
    Dim sPush As String
    sPush = $"Push.create("${pTitle}", {
            body: "${pBody}",
            icon: "${pImage}",
            timeout: ${pPause},
            tag: "${pTag}",
            onClick: function() {
                b4j_raiseEvent('push_click', {'value':'${pTag}'});
            },
            onError: function() {
                b4j_raiseEvent('push_error', {'value':'${pTag}'});
            }
        });"$
    page.ws.Eval(sPush,Null)
    page.ws.Flush
End Sub

The events have to be push_error and push_onclick. The tag passed is returned from the map variable.

Sub push_click(value As Map)
    Dim valuex As String = value.Get("value")
    page.Msgbox("",valuex,"","OK",False,"","")
End Sub

Sub push_error(value As Map)
    Dim valuex As String = value.Get("value")
    page.Msgbox("",valuex,"","OK",False,"","")
End Sub

 

[Philip Chatzigeorgiadis]

Nice, I have created a method that one can also pass a tag to it. This raises two events, onClick and OnError..

Sub PushIt(page As ABMPage, pTitle As String, pBody As String, pImage As String, pPause As String, pTag As String)
    If pPause = "" Then pPause = "5000"
    Dim sPush As String
    sPush = $"Push.create("${pTitle}", {
            body: "${pBody}",
            icon: "${pImage}",
            timeout: ${pPause},
            tag: "${pTag}",
            onClick: function() {
                b4j_raiseEvent('push_click', {'value':'${pTag}'});
            },
            onError: function() {
                b4j_raiseEvent('push_error', {'value':'${pTag}'});
            }
        });"$
    page.ws.Eval(sPush,Null)
    page.ws.Flush
End Sub

The events have to be push_error and push_onclick. The tag passed is returned from the map variable.

Sub push_click(value As Map)
    Dim valuex As String = value.Get("value")
    page.Msgbox("",valuex,"","OK",False,"","")
End Sub

Sub push_error(value As Map)
    Dim valuex As String = value.Get("value")
    page.Msgbox("",valuex,"","OK",False,"","")
End Sub

I think that you do not need to pass page as parameter to the PushIt sub.

 

[Mashiane]

I think that you do not need to pass page as parameter to the PushIt sub.

The code is sitting in a code module on my side that's why...