Push Notifications on DrupalGap Mobile Application.

In the past few days I was busy developing my DrupalGap Android Mobile Application. Although most of the features of DrupalGap are well-documented but there isn't too much clear information available on setting up push notifications on DrupalGap Mobile Application.
Here is a short write-up on how I set up the push notifications on my DrupalGap Android Mobile Application.
Hope this is helpful to the community.

The Prerequisites:

A Functioning Drupal Website and DrupalGap Mobile App 

Setting up the Platform:

We would first have to create Android API Key to send notifications from our Drupal Website to the Android device.In order to do this, follow the below mentioned steps:-

• Login to https://console.cloud.google.com with your google credentials . 
• On the dashboard, select the option to create a new project and name it.
• After creating a new project, a project number will be assigned to it. Make a note of the Project Number. This number will be the SENDER id.
• Now click on the Enable and Manage API's, an API Manager window will open up. Now click the Enable API option and than click on the Google Cloud Messaging option and enable it.
• After enabling the GCM option, it will tell you to create credentials. Click on "Go to Credentials" link. The First option (What kind of credentials are you using?) will be auto-populated as GCM. The Second option (Where you will be calling the API from?) should be selected as the Web Server.
• Next proceed to click on the link "What Credentials do i need?". Enter a name of your web-server over here (you may use your package name over here).
• Then select the option to "Create API Key". Make a note of this API Key since we will be using it in the next step.

Optional Step:(Restrict Usage only to Android apps)

• We can add the SHA1 certificate finger print to the the API Key in order to restrict the usage of notifications to the Android apps only.
• To do this, navigate to the root of your cordova project and run this command:  "keytool -genkey -v -keystore example.keystore -alias example -keyalg RSA -keysize 2048 -validity 10000"
• Follow all the prompts and make a note of the password you enter and then run this command: "keytool -exportcert -alias example -keystore example.keystore -list -v"
• Copy the SHA1 Finger Print.
• Now go to the GCM Project which we created in the earlier step and click on the Credentials tab. Click on the "Add Package Name and Finger Print" button and paste the SHA1 finger print. The Package name will the package name of your Android Application. This can be found in the AndroidManifest.xml file. 

Push Notifications Module Installation in Drupal Website:

After setting up GCM, we will now install the Push Notification module and set it up on on our Drupal Website

• Install the DrupalGap Module "Push Notifications" on your Drupal Website. The Module can be found at this link https://www.drupal.org/project/push_notifications. 
• Enable the necessary permissions from the Drupal Website for the Push Notifications module.
• Now on your Drupal website. Go to Configuration > Web services > Push Notification > Configure and paste the API Key generated from the previous step in the "Google Cloud Messaging API Key" field and save the configuration.
• Then we will go the Structure > Services Field. Here we should have the Drupalgap option. Click the "Edit Resources" button in the Drupalgap option  and select the Push Notification options along with the CRUD Operations of create resources and delete resources. Make sure to save the changes.
• At this point, flush all of Drupal's caches.( Click on  Home icon near the dashboard > Flush all caches)

Push Notifications Module Installation on DrupalGap:

Our next step will be to install the Push Notifications module on our DrupalGap Mobile Application and set it up accordingly.

• Install the Push notifications on your DrupalGap Mobile Application. The Module can be found at this link: https://github.com/signalpoint/push_notifications/archive/7.x-1.x.zip. 
• Ensure that after installation the Push Notification module resides in the app/modules/pushnotifications directory. Also enable the module by adding the line:  "Drupal.modules.contrib['push_notifications'] = {};" to your settings.js file in DrupalGap.
• Navigate to the app/modules/pushnotification directory and edit the push_notifications.js file. Add the Project Number (Sender id) to the push variable at the top of the file.Save the settings accordingly.

Handling the Push Notifications from the Website on the Device:

Now we have set up our Drupal Website to send out notifications to the DrupalGap Mobile App. The Next step will be to configure our DrupalGap Mobile Application to handle these incoming notifications.

• First, we have to create a hook to handle these incoming notifications. To create the hook go to the DrupalGap Web directory and browse to app/modules/custom folder.
• Create a new folder by the name of notifications and add a new file in it with the name as notifications.js. Add this code to the notifications.js file:

The Code for Notification.js file:

/**
 * Implements hook_push_notifications_receive().
 **/
function my_module_push_notifications_receive(data) {

  // data.message
  // data.title
  // data.count
  // data.sound
  // data.image
  // data.additionalData

  // Display the push notification.
  drupalgap_alert(data.message, {
    title: drupalgap.settings.title,
    buttonName: 'OK'
  });

}
#The Code can be customised to handle the incoming push notifications

• Make sure there are no syntax errors. Don't forget to enable this module from the settings.js file by adding the following line: Drupal.modules.custom['my_registration'] = {};"
• Now the mobile app should be able to handle the incoming notifications easily. Whenever there is an incoming notification an alert message would pop up on the android device.

Usage:

A quick walk-through of how to use the push notifications:

• Install the DrupalGap Mobile Application on the Android Device
• Login to the Drupal website and go to Configuration > Web services > Push Notification > Tokens
• You should see the Token for your Android device listed.
• Go to the Send Push tab and compose your message and send it to the appropriate device.
• The Notification should be visible on your mobile app in form of an alert box.

References: http://drupalgap.org/project/push_notifications