GCM Push Notification - Cordova

1. Using Google Cloud Messaging (GCM) :

Google Cloud Messaging(GCM) is a service for android devices to send and receive Android push notification messages.

To register a device:

1. An Android device sends a Sender ID to GCM server
2. GCM server sends back the Registration ID to the device
3. You need to store Registration ID at your Server. Because You going to  need this to send request to GCM.

To send a push notification:

     4. Your Server send a request to GCM with the Registration ID

     5. GCM sends a push notification to the device.

How Google Cloud Messaging(GCM) works

1.1. Setting up Your Google Project :

To enable GCM service, you must configure in Google Developer Console.

1. Go to Google Developer Console at cloud.google.com/console
2. Create a Project
3. On Project Dashboard, click Enable API button
4. Turn on Google Cloud Messaging for Android

1.2. Getting Your API Key :

Also, you will need your API key to be able to use the service.

1. From the Dashboard,  select Credentials
2. Under Public API Access, Click Create new key
3. Select Server Key.
4. click Create.

1.3. Getting Your Sender ID :

Copy the Project Number, which you should find on the top of the Project Dashboard. This is your GCM Sender ID you will need to enter in your Cordova app later. Finally, you are ready to use Android push notifications!

2. Develop Android App with Cordova:

First, Create a project using Cordova CLI.

$ cordova create push-notify com.example.push PushNotification

$ cd push-notify

$ cordova platform add android

2.1 Install Cordova Push Plugin:

Cordova Push Plugin allows your application to receive push notifications on Android, as well as Amazon Fire OS, iOS, Windows Phone and Windows 8 devices. The plugin can be automatically installed via the Cordova CLI:

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

2.2 Using GCM with Cordova:

Using the below given code you can  register your  device  as well as listen to  the GCM. Add the below given code in deviceready method of addEventListener.

var pushNotification = window.plugins.pushNotification;   

pushNotification.register(

successHandler,

errorHandler,

{

   'senderID':'your_sender_id',

   'ecb':'onNotificationGCM' // callback function

}

);

Listen to the callback Function.  The Response  will occur in  JSON format

so first time e.evet will occur with  ‘registered’ and if  anyone request to the server the e.evet will occur everytime with ‘message’.

function onNotificationGCM(e)

{

   switch(e.event)

   {

      case 'registered': if (e.regid.length > 0)

           alert(e.regid);

      break;

      case 'message': if (e.foreground)

          // When the app is running foreground.

        // and Your Notification Code will be HERE.

          alert('You can print your message.')

      break;   

      case 'error':

          console.log('Error: ' + e.msg);

      break;   

      default: console.log('An unknown event was received'); break;

   }

}

Below given function will return success for error with respect to the register method.

function successHandler(result) {

alert("Success : " +result);              

           console.log('Success: '+ result);

}

function errorHandler(error) {

           alert("Error : " +result);

           console.log('Error: '+ error);

}           

2.3 Send Request to the GCM:

To send request to  server you require  API-KEY, RegistrationID, and Message.

for the Testing purpose you can use  http://gcm-alert.appspot.com/

to send request to GCM. with URL as : https://android.googleapis.com/gcm/send

That's it!