This post is a part 25 of Intel XDK Complete Tutorial post series.
In this tutorial I will show you how to implement cross platform push notifications in Intel XDK app. In this tutorial I will show how to integrate push notification in a Legacy Hybrid apps using pushMobi. If you want to integrate push notifications in cordova hybrid apps then you have to use third party Push Plugin.
What is Push Notification?
Push notification is a message originated from app sever to the phone. At first App server sends message to the OS server(i.e., apple server or android server) and then OS server delivers the message to the OS. Finally OS delivers the message to the app.
Push notifications are great for keeping users informed with timely and relevant content, whether your app is running in the background or inactive or not running.
Notifications can display a message, play a distinctive sound, or update a badge on your app icon.
If a push message is received by the phone during the application is running on foreground then a event is fired. We need to handle the event and read the message.
When application is not in foreground then the OS displays the notification. And when the app is brought to foreground again it can read the notifications from the app server.
How does pushMobi Work?
pushMobi is one of the many other services provided by appMobi cloud. A appMobi account acts like a push notifications server of your app. You don’t have to create a server for sending push notifications.
You can compose a push message on appMobi dashboard and send it. pushMobi will send it to Apple and Android push servers and then they will send it to the application/phone.
pushMobi api provides you methods to uniquely identify every user who has installed your app so that you can send different messages to different users.
If you want to send push message from your server than you can use pushMobi web service api to send message to pushMobi server and then it will be sended to phone by pushMobi servers.
Enabling pushMobi Webservice for your App
You can enable pushMobi under the web services drop down.
You need to click “I Agree” and then enter password for a new appMobi account. Now you will have a appMobi app with same name as your Intel XDK app.
Login or Registering user
Some apps require user to login to use it. For example: Gmail, Facebook etc apps require you to create or login to account. Some apps like Flappy bird, blog etc doesn’t require user to login.
Apps that require login actually sends different push notifications to different users. But the apps that don’t require login send same push notifications to all users.
If your app falls into login required category than When a user installs your pushMobi app, your app needs to register the user to identify it uniquely. This will allow you to send notifications to specific users identified uniquely. You need to register that user in pushMobi servers using username, password and email.
If your app falls into non-login category than also you need to register the user but in this case you can just user the device id for username and password as you don’t have any other credentials.
A registration is compulsory because Apple and Android servers require you to provide the device UUID to which the message will be sent to. When you register a user, the pushMobi api automatically sends the device UUID to pushMobi servers. The pushMobi server actually maps the username and password to UUID before sending a push message.
Put this code in you app to login if user is registered otherwise register the user.
var onDeviceReady=function()
{
//login if user account exists. checkPushUser fires push.enable event to tell if the user was logged in or not.
AppMobi.notification.checkPushUser(AppMobi.device.uuid, AppMobi.device.uuid);
};
document.addEventListener("appMobi.device.ready",onDeviceReady,false);
var notificationsRegistered=function(event)
{
//couldn't be logged in.
if(event.success === false)
{
//Becz user is not registered.
if (AppMobi.cache.getCookie("didAddPushUser") == undefined)
{
AppMobi.cache.setCookie("didAddPushUser",AppMobi.device.uuid,-1);
AppMobi.notification.addPushUser(AppMobi.device.uuid, AppMobi.device.uuid, "no@email.com");
return;
}
//some other reason
else
{
//some other reason. Check event.message property
}
return;
}
else
{
//user has been successfully logged in
}
};
document.addEventListener("appMobi.notification.push.enable",notificationsRegistered,false);
{
//login if user account exists. checkPushUser fires push.enable event to tell if the user was logged in or not.
AppMobi.notification.checkPushUser(AppMobi.device.uuid, AppMobi.device.uuid);
};
document.addEventListener("appMobi.device.ready",onDeviceReady,false);
var notificationsRegistered=function(event)
{
//couldn't be logged in.
if(event.success === false)
{
//Becz user is not registered.
if (AppMobi.cache.getCookie("didAddPushUser") == undefined)
{
AppMobi.cache.setCookie("didAddPushUser",AppMobi.device.uuid,-1);
AppMobi.notification.addPushUser(AppMobi.device.uuid, AppMobi.device.uuid, "no@email.com");
return;
}
//some other reason
else
{
//some other reason. Check event.message property
}
return;
}
else
{
//user has been successfully logged in
}
};
document.addEventListener("appMobi.notification.push.enable",notificationsRegistered,false);
Here we are using device UUID as username and password to register the user. If your app needs login then use actual username, password and email of the user. Once the user is registered the appMobi server also creates a user id for the username and password. This user id is required during use of pushMobi web service api.
Now on emulator tab you would see pushMobi widget activated
Receiving Messages
When your app is in foreground you will receive appMobi.notification.push.receive notification when a push message is sent to the app. When your app changes to foreground state from other states you need to handle the intel.xdk.device.resume event and check if any notification is unread.
var receivedPush = function(){
//Get the notifications object
var myNotifications=AppMobi.notification.getNotificationList();
//It may contain more than one message, so iterate over them
var len=myNotifications.length;
if(len > 0) {
for(i=0; i < len; i++) {
//Get message object
msgObj=AppMobi.notification.getNotificationData(myNotifications[i]);
try{
if(typeof msgObj == "object" && msgObj.id == myNotifications[i]){
//Display the message now.
//You can do this however you like - it doesn't have to be an alert.
AppMobi.notification.alert(msgObj.msg + "\n" + msgObj.data + "\n" + msgObj.userkey,"pushMobi Message","OK");
//Always mark the messages as read and delete them.
//If you dont, your users will get them over and over again.
AppMobi.notification.deletePushNotifications(msgObj.id);
//here we have added return statement to show only first valid message, you can manage it accordingly if you want to read all messages
return;
}
AppMobi.notification.alert("Invalid Message Object: " + i,"My Message","OK");
}catch(e){
AppMobi.notification.alert("Caught Exception For: " + msgObj.id,"My Message","OK");
//Always mark the messages as read and delete them.
//If you dont, your users will get them over and over again.
AppMobi.notification.deletePushNotifications(msgObj.id);
}
}
}
};
document.addEventListener("appMobi.notification.push.receive", receivedPush, false);
//app changes it state to foreground.
document.addEventListener("intel.xdk.device.resume",receivedPush,false);
//Get the notifications object
var myNotifications=AppMobi.notification.getNotificationList();
//It may contain more than one message, so iterate over them
var len=myNotifications.length;
if(len > 0) {
for(i=0; i < len; i++) {
//Get message object
msgObj=AppMobi.notification.getNotificationData(myNotifications[i]);
try{
if(typeof msgObj == "object" && msgObj.id == myNotifications[i]){
//Display the message now.
//You can do this however you like - it doesn't have to be an alert.
AppMobi.notification.alert(msgObj.msg + "\n" + msgObj.data + "\n" + msgObj.userkey,"pushMobi Message","OK");
//Always mark the messages as read and delete them.
//If you dont, your users will get them over and over again.
AppMobi.notification.deletePushNotifications(msgObj.id);
//here we have added return statement to show only first valid message, you can manage it accordingly if you want to read all messages
return;
}
AppMobi.notification.alert("Invalid Message Object: " + i,"My Message","OK");
}catch(e){
AppMobi.notification.alert("Caught Exception For: " + msgObj.id,"My Message","OK");
//Always mark the messages as read and delete them.
//If you dont, your users will get them over and over again.
AppMobi.notification.deletePushNotifications(msgObj.id);
}
}
}
};
document.addEventListener("appMobi.notification.push.receive", receivedPush, false);
//app changes it state to foreground.
document.addEventListener("intel.xdk.device.resume",receivedPush,false);
Now if you send a message from pushMobi widget you will be able to see a alert box.
Logging out User
If your app falls into login required category than when user sign’s out you must use deletePushUser function to remove push notification for that user on that phone.
This is done because if someone else has logged in then the current user will be able to see the notifications of the previous user but not its notifications. That’s because a cookie is used to identify the current user and only one cookie can exist.
AppMobi.notification.deletePushUser();
document.addEventListener("appMobi.notification.push.disable",deletePushUserEvent,false);
var deletePushUserEvent=function(event)
{
if(event.success==false)
{
//error occured. Check event.message
}
else
{
//success
}
}
document.addEventListener("appMobi.notification.push.disable",deletePushUserEvent,false);
var deletePushUserEvent=function(event)
{
if(event.success==false)
{
//error occured. Check event.message
}
else
{
//success
}
}
Adding attributes to registered user
We can also associate key/value pairs information for a user. This data will allow you to send push notifications to particular users. For example: we can also put demographic information to users. And then we can send different push notifications to users from different countries.
var attributes = new AppMobi.Notification.PushUserAttributes();
attributes.s1 = "male"; // gender
attributes.s2 = "Lancaster" // city
attributes.s3 = "PA" // state
attributes.s4 = "USA" // country
attributes.n1 = 1982 // birth year
attributes.n2 = 17602 // zip code
AppMobi.notification.setPushUserAttributes(attributes);
document.addEventListener("appMobi.notification.push.user.editattributes",updateNotificationEvent,false);
var updateNotificationEvent=function(event)
{
if(event.success==false)
{
//error occurred. check event.message
}
else
{
//success
}
}
attributes.s1 = "male"; // gender
attributes.s2 = "Lancaster" // city
attributes.s3 = "PA" // state
attributes.s4 = "USA" // country
attributes.n1 = 1982 // birth year
attributes.n2 = 17602 // zip code
AppMobi.notification.setPushUserAttributes(attributes);
document.addEventListener("appMobi.notification.push.user.editattributes",updateNotificationEvent,false);
var updateNotificationEvent=function(event)
{
if(event.success==false)
{
//error occurred. check event.message
}
else
{
//success
}
}
Using pushMobi webservice to send Notification
As I said earlier you can also send push messages from your own server. To send a push message you first need to get the unique user id assigned by pushMobi to every registered user. You can get it using FindUser. Then use SendMessage to send a message to a user.
Testing in Intel App Preview
pushMobi api’s will not work in Intel app preview. So you can test it only in emulator.
Testing on real phone
As I had told Intel APP Preview will not work. But if you still want to test on phone then you have to build the app binary and test it.
In Android you can test the apk file directly but on iOS you need to build it as iOS Ad Hoc to test it.
pushMobi in Production
Use Legacy Hybrid to build your app. Cordova builds don’t support appMobi services and their apis.
Before making final build of your app for release you need to make sure you have enabled push notifications in the app. Here are the instructions if you have not:
Enable Push Notification for iOS App
Enable Push Notification for Android App.
Once you app is released into public you can use pushMobi web service or appMobi dashboard to send push messages.
pushMobi Limits and Alternatives
pushMobi is a free service. There is no limit to the push messages that you can send. These messages send in a queue based system, so thousands messages from your app sent every minute can cause delays in receiving messages.
If your app is used by large number of users and you are sending lots of push notifications and you are earning from your app too then you should prefer Parse Push as it has no delay or downtime. For most of the cases pushMobi is absolutely fine.
