Push Notification PhoneGap

Question

I am developing an app to receive push notifications, however I am having a few problems.

I am using PhoneGap to develop my app and this plugin - PushPlugin I have installed the Plugin using PhoneGap successfully and it is listed in my installed plugins and I also have the needed permissions when installing my app on my phone.

I have registered my app for GCM services and have obtained my Project Number, API key etc. I followed the steps here - Google Cloud Messaging .

When the app first starts I will obviously need to get a registration ID for my device (Android device by the way), however I haven't been able to get it to run the entire registration code.

In the documentation for the plugin it says the code needs to be called as soon as the device is ready - which I have done.

var pushNotification;

document.addEventListener("deviceready", function(){
    pushNotification = window.plugins.pushNotification;

    $("#app-status-ul").append('<li>registering ' + device.platform + '</li>');
if ( device.platform == 'android' || device.platform == 'Android' || device.platform == "amazon-fireos" ){
    pushNotification.register(
    successHandler,
    errorHandler,
    {
        "senderID":"sender_ID",
        "ecb":"onNotification"
    });
} 

});



// result contains any message sent from the plugin call
function successHandler (result) {
    alert('result = ' + result);
}

// result contains any error description text returned from the plugin call
function errorHandler (error) {
    alert('error = ' + error);
}

// Android and Amazon Fire OS
function onNotification(e) {
    $("#app-status-ul").append('<li>EVENT -> RECEIVED:' + e.event + '</li>');

    switch( e.event )
    {
    case 'registered':
        if ( e.regid.length > 0 )
        {
            $("#app-status-ul").append('<li>REGISTERED -> REGID:' + e.regid + "</li>");
            // Your GCM push server needs to know the regID before it can push to this device
            // here is where you might want to send it the regID for later use.
            console.log("regID = " + e.regid);
        }
    break;

    case 'message':
        // if this flag is set, this notification happened while we were in the foreground.
        // you might want to play a sound to get the user's attention, throw up a dialog, etc.
        if ( e.foreground )
        {
            $("#app-status-ul").append('<li>--INLINE NOTIFICATION--' + '</li>');

            // on Android soundname is outside the payload.
            // On Amazon FireOS all custom attributes are contained within payload
            var soundfile = e.soundname || e.payload.sound;
            // if the notification contains a soundname, play it.
            var my_media = new Media("/android_asset/www/"+ soundfile);
            my_media.play();
        }
        else
        {  // otherwise we were launched because the user touched a notification in the notification tray.
            if ( e.coldstart )
            {
                $("#app-status-ul").append('<li>--COLDSTART NOTIFICATION--' + '</li>');
            }
            else
            {
                $("#app-status-ul").append('<li>--BACKGROUND NOTIFICATION--' + '</li>');
            }
        }

       $("#app-status-ul").append('<li>MESSAGE -> MSG: ' + e.payload.message + '</li>');
           //Only works for GCM
       $("#app-status-ul").append('<li>MESSAGE -> MSGCNT: ' + e.payload.msgcnt + '</li>');
       //Only works on Amazon Fire OS
       $status.append('<li>MESSAGE -> TIME: ' + e.payload.timeStamp + '</li>');
    break;

    case 'error':
        $("#app-status-ul").append('<li>ERROR -> MSG:' + e.msg + '</li>');
    break;

    default:
        $("#app-status-ul").append('<li>EVENT -> Unknown, an event was received and we do not know what it is</li>');
    break;
  }
}

On success it should run the success handler or if it fails, the error handler. However I am getting neither.

I have been narrowing the code down to see if it is crashing on a certain line, using alerts. As shown below -

alert('Start of push');
document.addEventListener("deviceready", function(){
var pushNotification;
    pushNotification = window.plugins.pushNotification;
    alert('past pushNotification');

    alert(device.platform);

    $("#app-status-ul").append('<li>registering ' + device.platform + '</li>'); //crashing on this line

    alert('registering');
if( device.platform == 'android' || device.platform == 'Android'){
    alert('pushreg');
    pushNotification.register(
    successHandler,
    errorHandler,
    {
        "senderID":"sender_ID_here",
        "ecb":"onNotification"
    });
} 
alert('register complete');    
});




// result contains any message sent from the plugin call
function successHandler (result) {
    alert('result = ' + result);
}

// result contains any error description text returned from the plugin call
function errorHandler (error) {
    alert('error = ' + error);
}

// Android and Amazon Fire OS
function onNotification(e) {
    $("#app-status-ul").append('<li>EVENT -> RECEIVED:' + e.event + '</li>');

    switch( e.event )
    {
    case 'registered':
        if ( e.regid.length > 0 )
        {
            $("#app-status-ul").append('<li>REGISTERED -> REGID:' + e.regid + "</li>");
            // Your GCM push server needs to know the regID before it can push to this device
            // here is where you might want to send it the regID for later use.
            console.log("regID = " + e.regid);
        }
    break;

    case 'message':
        // if this flag is set, this notification happened while we were in the foreground.
        // you might want to play a sound to get the user's attention, throw up a dialog, etc.
        if ( e.foreground )
        {
            $("#app-status-ul").append('<li>--INLINE NOTIFICATION--' + '</li>');

            // on Android soundname is outside the payload.
            // On Amazon FireOS all custom attributes are contained within payload
            var soundfile = e.soundname || e.payload.sound;
            // if the notification contains a soundname, play it.
            var my_media = new Media("/android_asset/www/"+ soundfile);
            my_media.play();
        }
        else
        {  // otherwise we were launched because the user touched a notification in the notification tray.
            if ( e.coldstart )
            {
                $("#app-status-ul").append('<li>--COLDSTART NOTIFICATION--' + '</li>');
            }
            else
            {
                $("#app-status-ul").append('<li>--BACKGROUND NOTIFICATION--' + '</li>');
            }
        }

       $("#app-status-ul").append('<li>MESSAGE -> MSG: ' + e.payload.message + '</li>');
           //Only works for GCM
       $("#app-status-ul").append('<li>MESSAGE -> MSGCNT: ' + e.payload.msgcnt + '</li>');
       //Only works on Amazon Fire OS
       $status.append('<li>MESSAGE -> TIME: ' + e.payload.timeStamp + '</li>');
    break;

    case 'error':
        $("#app-status-ul").append('<li>ERROR -> MSG:' + e.msg + '</li>');
    break;

    default:
        $("#app-status-ul").append('<li>EVENT -> Unknown, an event was received and we do not know what it is</li>');
    break;
  }
}
alert('end of push');

Obviously it is able to run the first alert "Start of Push" as well as the "past Push Notification" alert. I checked to make sure that the device.platform wasn't crashing it and put an alert in with the same code - which returns Android on my device. However I never seem to get anything after that, which leads me to believe that it's crashing on $("#app-status-ul").append('<li>registering ' + device.platform + '</li>');

If anyone could help me try and figure this out that would be a great help,

Thanks.

Answer 1

To get the device platform, " Device " plugin should be installed on your Phonegap/Cordova app.

You can add plugin to your app from command line like this

cordova plugin add org.apache.cordova.device

To list your plugins

cordova plugin ls

If your are getting [ 'org.apache.cordova.device' ] in your list, it means your plugin is not installed

To remove plugin

cordova plugin rm org.apache.cordova.device

Answer 2

This are the steps you need to follow to build a App for push notification:

*Install cordova using CLI and run following commands(refer link )

1)Create a cordova project

cordova create hello com.example.hello HelloWorld

2)Add Platform

cordova platform add android

3)Build project

cordova build android

4)Add plugins

cordova plugin add org.apache.cordova.device
cordova plugin add org.apache.cordova.media
cordova plugin add https://github.com/phonegap-build/PushPlugin.git

5)Build project

cordova build android

6)Import the created project in Eclipse

7)Use required code from this location to design your index.html.

8)Copy PushNotification.js from

ProjectFolderPath \\plugins\\com.phonegap.plugins.PushPlugin\\www

ProjectFolderPath -path of the project created using CLI

to your eclipse project assets/www/ folder

9)Also add a jquery .js file and a sound file in assets/www folder. (you can download and copy it from Github Example folder)

10) In index.html do not forget to change senderID of your GCM project (ie ProjectId)

11)Run your app on actual device. It might not work on Emulator.