QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Push Notifications in Intel XDK using pushMobi

Push Notifications in Intel XDK using pushMobi

push-notificaton

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.

img_1132urbanairshipnotif

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.

Screen Shot 2014-11-17 at 12.14.38 am

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);

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

Screen Shot 2014-11-17 at 4.42.21 pm

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);

Now if you send a message from pushMobi widget you will be able to see a alert box.

Screen Shot 2014-11-17 at 4.51.28 pm

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

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

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.

Nov 17, 2014Narayan Prusty
Disable Copy and Paste in PhonegapCreate an Frontend Editor with Code Highlighting and Execution
Comments: 14
  1. l'album de birdy
    5 years ago

    What’s up to every one, the contents present at this web page are truly
    awesome for people experience, well, keep up the nice work fellows.

    ReplyCancel
  2. red hoodies for men
    5 years ago

    Nice post. I learn something totally new and challenging on websites I stumbleupon every day.
    It will always be useful to read articles from other authors and practice
    a little something from other sites.

    ReplyCancel
  3. Tú Doãn
    6 years ago

    I compiled it to APK and installed it on my device., i just test with link https://webservices.appmobi.com/pushmobi.aspx? function SendBroadcastMessage, when i send appName is title of project, i receive “msg sent to 1 users” but i test with appName is appName of project, i receive “msg sent to 0 users”

    https://webservices.appmobi.com/pushmobi.aspx?CMD=SendBroadcastMessage&authuser=doanminhtu2007@gmail.com&authpw=password&appname=buidagain&msg=21321

    can you help me. thanks :)

    ReplyCancel
  4. Bruno
    6 years ago

    How remove Push from Intel XDK ? i dont use in some aplication, but when i send my app to itunes connect i recive this msg : “Missing Push Notification Entitlement “

    ReplyCancel
  5. HTVSoft
    7 years ago

    I did as you said. compiled it to APK and installed it on my device.
    But it doesn’t work.
    It shows 0 subscribers. Why is that?

    ReplyCancel
  6. Renato Medrado
    7 years ago

    great tip!
    It worked perfectly.
    Just a detail, I like to change the encoding. Not have accepting accents in the submitted text.

    ReplyCancel
    • HTVSoft
      7 years ago

      What did you do to make it work?
      For me it shows 0 subscribers. It doesn’t work at all for me. Any Idea?

      ReplyCancel
    • HTVSoft
      7 years ago

      What did you do to make it work? For me it shows 0 subscribers. It doesn’t work at all, can you assist me?

      ReplyCancel
    • Raj
      6 years ago

      how did u do it broo..plss help me in this

      ReplyCancel
  7. Harshit
    7 years ago

    I tried this, but after logging into appmobi via intel xdk, the app mobi push service app is still showing “To use pushmobi app must login….”

    ReplyCancel
    • Sherlyn
      5 years ago

      Hey, its a great tutorial but its not working perfectly for me. As told (the above person) its still showing pushmobi must login to use or something like that. Any fix for that?

      ReplyCancel
  8. Kenobi
    7 years ago

    Good tutorial, is working in xdk same as you are showing on image, but in devices does not work, subscribers are equal to 0 always.

    ReplyCancel
    • HTVSoft
      7 years ago

      subscribers are equal to 0 always in my case too, did you manage to solve it?

      ReplyCancel
      • Raj
        6 years ago

        the pushmobi tab is not getting created on the emulator pagee..help mee..

        ReplyCancel

Leave a Reply to Tú Doãn Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

Image7 years ago 14 Comments Cordova
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • What is Push Notification?
  • How does pushMobi Work?
  • Enabling pushMobi Webservice for your App
  • Login or Registering user
  • Receiving Messages
  • Logging out User
  • Adding attributes to registered user
  • Using pushMobi webservice to send Notification
  • Testing in Intel App Preview
  • Testing on real phone
  • pushMobi in Production
  • pushMobi Limits and Alternatives
Related Articles
  • Push Notification in Intel XDK using Push Plugin
  • Share Button for Intel XDK APP
  • Playing Beep Sound using Intel XDK
  • Vibrating Phone using Intel XDK
  • Integrate Google Analytics in Intel XDK APP
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license