Creating a PhoneGap Instance, A HelloWorld Android App using PhoneGap with Push Notification

Install Node.js, git and then, via  command-line run the following in a workspace folder for phonegap

Follow the below steps to create instance,

npm install -g phonegap
npm install -g plugman
phonegap create <app-name-folder> --id <id> --name <app-name>
</app-name></id></app-name-folder>
         Example --> phonegap create testingpush --id com.company.testingpush --name testingpush

Navigate to the folder using the command - cd

        Example --> cd testingpush

For Checking Phonegap version

phonegap --version

Adding android platform to phonegap instance

phonegap platform add android

Add necessary basic plugins using cordova

cordova plugin add cordova-plugin-network-information cordova-plugin-dialogs cordova-plugin-camera cordova-plugin-console cordova-plugin-device cordova-plugin-file-transfer

To view the plugins installed

cordova plugin ls

Note: install git and set its path to the current project folder.

Add GCM plugin

cordova plugin add https://github.com/phonegap-build/PushPlugin.git

Importing the created project files into Eclipse and configure Push Notification

    Import the project to the eclipse. Path /testingpush/platforms and import the android folder.

  • Project files will be under the www folder.
  • Add the following in index.html file.
  • Copy the PushNotification.js from the plugin folder to the js folder.

    When you created a new project, you should already have an /www/index.js with a few function. Where the addEventListener method registers for deviceready event, you must change the listener name to the starting point of your phonegap app, let’s call it init. And in your init function, create a instance, then register the mobile device for notification as follows

var pushNotification = window.plugins.pushNotification; 
pushNotification.register( yourSuccessHandler, yourErrorHandler, {
    'senderID':'your_sender_id', 
    'ecb':'onNotificationGCM' // mention your call back function here
 } );

The SenderID is one you have obtained when you registered at Google API Project. Define your successHandler and errorHandler callbacks, also the ecb event callbacks as follows

//yourSuccessHandler function
function yourSuccessHandler(result) {
    console.log('Your Success response: '+ result);
}
 
//yourErrorHandler function
function yourErrorHandler(error) {
    console.log('Your Error response: '+ error);
}
 
function onNotificationGCM(e) {
    switch(e.event){
        case 'registered':
            if (e.regid.length > 0){
                deviceRegistered(e.regid);
            }
        break;
 
        case 'message':
            if (e.foreground){
            	// When the app is running foreground. 
                alert('in foreground');
            }
        break;
 
        case 'error':
            console.log('Error: ' + e.msg);
        break;
 
        default:
          console.log('An unknown event was received');
          break;
    }
}

    When you are ready, to quickly test if you get your device’s registration ID, replace the deviceRegistered function with console.log(e.regid), where you will receive the registered Id.

Server side Code to send push for list of device ids with PHP cURL

define("GOOGLE_API_KEY","<server from="" google="" key="" obtained="">");
  define("SENDER_ID","<sender-id>");
  $url = 'https://android.googleapis.com/gcm/send';
$output = "<device ids="" registred="">"
$subject = 'Notification';
$msg= "Test push notification test";
  $curl_fields_array = array(
    'registration_ids' => array($output),
    'data' => array(
      "message" => $msg,
      "title" => $subject
    ),
  );
 
  $headers = array(
    'Authorization: key=' . GOOGLE_API_KEY,
    'Content-Type: application/json',
  );
 
  $ch = curl_init();
  curl_setopt($ch, CURLOPT_URL, $url);
  curl_setopt($ch, CURLOPT_POST, true);
  curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
  curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
  curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
  curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($curl_fields_array));
 
  echo 'your json request = ' . json_encode($curl_fields_array);
  $result = curl_exec($ch);
  if ($result === FALSE) {
    die('Sorry, Curl execution failed: ' . curl_error($ch));
  }
  curl_close($ch);
  print_r('GCM result = '.$result);
</device></sender-id></server>
Category: