Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Integrating Push Notifications in a PhoneGap Android Application

DZone's Guide to

Integrating Push Notifications in a PhoneGap Android Application

In this walkthrough, learn how to integrate push notifications into your Android mobile app built on the PhoneGap platform.

· Mobile Zone ·
Free Resource

If you are building your app using the PhoneGap platform, integrating App42 Push Notifications is a very simple task and can be done in a few easy steps. We have created a sample PhoneGap Android application using App42 JavaScript API and you can get started in few easy steps as shown below:

Here are the steps to run this sample app.

  1. Register with the App42 platform.

  2. Create an app once you are on the quick start page after registration.

  3. If you are already a registered user, then login to AppHQ console and create an app from the App Manager Tab.

  4. To use the Push Notification Service in your Android application, create a new project in the Google API Console.

  5. Click on the Services option in the Google Console and enable the Google Cloud Messaging for Android service.

  6. Click on the API Access tab and create a new server key for your application with blank server information.

  7. Go to the AppHQ console, click on Push Notification, and select Android Settings in the Settings option.

  8. Select your app, copy the server key that was generated using the Google API Console in step 6, and submit it.

  9. Download the project from here and import it into Eclipse.

  10. Open the index.html file in the assets/app42 folder of the sample app and make the following changes:

    1. Replace api-Key and secret-Key that you received in step 2 or 3 at line 51.

    2. Replace your user-id with which you want to register your application for Push Notifications at line 52.

  11. A. Replace api-Key and secret-Key that you have received in step 2 or 3 at line number 51.
    B. Replace your user-id by which you want to register your application for PushNotification at line number 52.
  12. A. Replace api-Key and secret-Key that you have received in step 2 or 3 at line number 51.
    B. Replace your user-id by which you want to register your application for PushNotification at line number 52.
A. Replace api-Key and secret-Key that you have received in step 2 or 3 at line number 51.
B. Replace your user-id by which you want to register your application for PushNotification at line number 52.
  1. After registering for Push Notifications, go to the AppHQ console, click on Push Notification, and select your application after selecting the User tab.

  2. Select the desired user from the registered user list and click on the Send Message button.

  3. Send an appropriate message to the user by clicking the Send button.

Design Details

Following are the high-level design details, which include different App42 API usages for integration purposes in the sample.

1. Send Push Notifications to Users Using the JavaScript App42 API: If you want to send a Push Notification message using the App42 API, pass the userId and message in this method written in the index.html file:

function sendPushToUser() {
  var msg = document.getElementById('msg').value;
  var username = document.getElementById('user').value;
  var push = new App42Push();
  push.sendPushMessageToUser(username, msg);
}

2. Send Push Notifications to All Users Using JavaScript App42 API: If you want to send a Push Notification message to all users using the App42 API, pass the message in this method written in the index.html file.

function sendPushMessageToAll() {
  var push = new App42Push();
  var message = document.getElementById('msg').value;
  push.sendPushMessageToAll(message);
}

3. Customized Push Notification Message: You can also customize your Push Notification message by changing the following code in the GCMIntentService.java file accordingly:

Notification notification = new NotificationCompat.Builder(context)
        .setContentTitle(title)
        .setContentText(message)
        .setContentIntent(intent)
        .setNumber(++msgCount)
        .setSmallIcon(android.R.drawable.menuitem_background)
        .setWhen(when)
        .setLargeIcon(bmp)
        .setLights(Color.YELLOW, 1, 2)
        .setAutoCancel(true)
        .build();
         notification.defaults |= Notification.DEFAULT_SOUND; 
         notification.defaults |= Notification.DEFAULT_VIBRATE;
         notificationManager.notify(0, notification);
public void renderData(final String message)
{
  try 
  {
    Thread.sleep(5000);
    super.loadUrl("javascript:pushMessageAlert(\"" + message + "\")");
  }
  catch (InterruptedException e)
  {
    e.printStackTrace();
  }
}
public void renderData(final String message)
{
  try 
  {
    Thread.sleep(5000);
    super.loadUrl("javascript:pushMessageAlert(\"" + message + "\")");
  }
  catch (InterruptedException e)
  {
    e.printStackTrace();
  }
}


5. Rendering Push Notifications on the HTML Page: The following function is called from Android native and renders Push Notifications on the HTML page.

function callFromActivity(msg) {
  alert(msg)
  document.getElementById("mytext").innerHTML = msg;
}

6. Calling JavaScript registerForPush (deviceId) Function From Android Native Code: This function is used to store a deviceId on App42 to get Push Notifications.

public void registerForApp42Push(String deviceId) {
  try {
    Thread.sleep(5000);
    super.loadUrl("javascript:registerForPush(\"" + deviceId + "\")");
  } catch (InterruptedException e) {
    e.printStackTrace();
  }
}

7. Store Device Token on App42: This function stores device tokens on App42 using the JavaScript API, called from the Android native code:

function registerForPush(deviceId) {
  var push = new App42Push();
  push.storeDeviceToken(App42.getLoggedInUser(),
    deviceId, 'ANDROID');
}

8. AndroidManifest.xml File Changes: If you are customizing your own Android application that is built using the PhoneGap API, then make the following changes in your AndroidManifest.xml using this sample’s AndroidManifest.xml file.

Add the following permission in your AndroidManifest.xml file:

<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION">
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" >
<uses-permission android:name="android.permission.GET_ACCOUNTS" >
<uses-permission android:name="android.permission.INTERNET" >
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.WAKE_LOCK" >
  <permission
        android:name="com.shephertz.app42.android.phonegap.push.permission.C2D_MESSAGE"
        android:protectionLevel="signature" />
<uses-permission android:name="com.shephertz.app42.android.phonegap.push.permission.C2D_MESSAGE" />
<uses-permission android:name="com.google.android.c2dm.permission.RECEIVE" />

Add a Receiver component in your Androidmanifest.xml file:

< receiver
android: name = "com.google.android.gcm.GCMBroadcastReceiver"
android: permission = "com.google.android.c2dm.permission.SEND" >
 < intent - filter >
 <!-- Receives the actual messages. -->
 < action android: name = "com.google.android.c2dm.intent.RECEIVE" / >
 <!-- Receives the registration id. -->
 < action android: name = "com.google.android.c2dm.intent.REGISTRATION" / >
 < category android: name = "com.shephertz.app42.android.phonegap.push" / >
 < /intent-filter> < /receiver>

Declare the Service in your AndroidManifest.xml file.

Replace the application package name "com.shephertz.app42.android.phonegap.push" with your application package name in AndroidManifest.xml file.

Topics:
phonegap ,push notifications ,android ,mobile ,mobile app development

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}