Current Status of Push in PWA

1

Hi
What is the current status of setting up PUSH notifications in a PWA app?

2

That’s a really broad question.

AppStudio makes regular JavaScript web page based apps (which PWAs are). Anything which can be done there can be created using AppStudio.

The trouble is in the implementation details. PWAs are fine, but Push Notifications have a bunch of requirements and dependancies, some of which are platform and browser dependant.

3

I understand a few years back when cordova was a thing I used pushwoosh on Appstudio but have not used anything since. I have a new client who is asking if i can do an app with push. I have not done much on Appstudio for a few years so looking at getting back into it

4

I do it like this. You’ll need to create a form with Textarea1 and button etc, you can see from this code. I did this synchronous it seems, which works but imagine asynchronous would be better.

You’ll need sw.js from PushAlertCo and to register, get an api key etc. I can’t remember there being a cost.

Dim id
Dim REST_API_KEY = "Your key here"

JavaScript
(pushalertbyiw = window.pushalertbyiw || []).push(['onReady', onPAReady]);

function onPAReady() {
console.log("onPAReady()");
console.log(PushAlertCo.subs_id); //If empty Then user is Not subscribed
localStorage.PA_subid = PushAlertCo.subs_id;
//YOUR CODE
}
(pushalertbyiw = window.pushalertbyiw || []).push(['onSuccess', callbackOnSuccess]);

function callbackOnSuccess(result) {
console.log("callbackOnSuccess:" + result.subscriber_id); //will output the user's subscriberId
console.log(result.alreadySubscribed); // False means user just Subscribed
Textarea1.value = Textarea1.value + '\r\n' + "result.alreadySubscribed:" + result.alreadySubscribed
subs_info = PushAlertCo.getSubsInfo();
console.log("Status: " + subs_info.status + ", subs_id: " + subs_info.subs_id);
}

(pushalertbyiw = window.pushalertbyiw || []).push(['onFailure', callbackOnFailure]);

function callbackOnFailure(result) {
console.log("callbackOnFailure:" + result.status); //-1 - blocked, 0 - canceled or 1 - unsubscribed
Textarea1.value = Textarea1.value + '\r\n' + "callbackOnFailure:" + result.status;
//YOUR CODE
}

End JavaScript

Function Main()
opt = {}
opt.scope = "https://'Your App Url'"
opt.updateViaCache = "all"
JavaScript
navigator.serviceWorker.register("/sw.js",opt).then(
(registration) => {
console.log("Service worker registration succeeded:", registration);
},
(error) => {
console.error(`Service worker registration failed: ${error}`);
},
);
End JavaScript
console.log("Main()")
If PushAlertCo = undefined Then
Textarea1.value = "PushAlertCo undefined"
Else
Textarea1.value = "PushAlertCo loaded"
End If

End Function

Function SubscribeButton_onclick()
console.log("SubscribeButton_onclick")
PushAlertCo.forceSubscribe()
End Function

Function ViewSubscribeButton_onclick()
'send to phone
sendnotification(Input1.value)
End Function

Function ViewIDButton_onclick()
console.log(PushAlertCo.subs_id)
subs_info = PushAlertCo.getSubsInfo()
console.log("Status: " + subs_info.status + ", subs_id: " + subs_info.subs_id)
Textarea1.value = Textarea1.value & vbCRLF & "Status: " + subs_info.status + ", subs_id: " + subs_info.subs_id
localStorage.PA_subid = subs_info.subs_id
End Function

Function SendButton_onclick()
sendnotification(localStorage.PA_subid)
End Function

Function sendnotification(dest)
console.log("sendnotification(" & dest & ")")
o = {}
o.title = "Global Vets Appointment"
o.message = "Herd lepto vaccination booked"
o.iconfile = "https://www.yoururl.com/PushApp/GVSIcon192.png"
o.action1 = {"title": "Accept","url": "yoururl.com/Booking.php?custid=xxxx&response=accept&type=booking"} 'add "
o.action2 = {"title": "Decline","url": "yoururl.com/Booking.php?custid=xxxx&response=decline&type=booking"}
o.subscriberid = dest
o.apiKey = REST_API_KEY
t = JSON.stringify(o)
console.log(t)
Url = "pushAlertSend.php"
req = Ajax(Url, "POST", t)
console.log("rt:" & req.responseText)
console.log("status:" & req.status)
Textarea1.value = Textarea1.value & vbCRLF & req.status & vbCRLF & req.responseText
End Function

Function GetNotificationButton_onclick()
PushAlertCo.triggerMe(True)
End Function

My php file

<?php 
$ob = json_decode(file_get_contents('php://input'));

$title = $ob->title;
$message = $ob->message;
$icon = $ob->iconfile;
$url = "https://farmmates.com/";
$subscriber = $ob->subscriberid;
$apiKey = $ob->apiKey;

$curlUrl = "https://api.pushalert.co/rest/v1/send";

//POST variables
$post_vars = array(
    "icon" => $icon,
    "title" => $title,
    "message" => $message,
    "url" => $url,
    "subscriber" => $subscriber
);

$headers = Array();
$headers[] = "Authorization: api_key=".$apiKey;

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $curlUrl);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($post_vars));
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);

$result = curl_exec($ch);

$output = json_decode($result, true);
if($output["success"]) {
    echo $output["id"]; //Sent Notification ID
}
else {
    echo "failed send";
    //Others like bad request
}
?>
```