Integrating push notification in phonegap android application

Integrating Push Notification in PhoneGap Android Application

If you are building your app using Phonegap platform, integrating App42 Push Notification in it 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 for the same and can be get started in few easy steps as shown below:

Here are the few easy steps to run this sample app.

1. Register with App42 platform.

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

3. If you are already a registered user then login to AppHQ console and create an app from App Manager Tab. 4. To use Push Notification Service in your Android application, create a new project in Google API Console.

5. Click on services option in Google console and enable Google Cloud Messaging for Android service.

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

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

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

9.

Download the project from here and import it in the eclipse.

10. Open index.html file in assets/app42 folder of sample app and make the following changes: 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.

11. Open App42PhonegapPush.java file in sample app and make the following changes.

A.

Replace

project-no

with

your

Google

Project

Number

at

line

number

28.

12. Build your android application and install it on your android device.

Test and verify PushNotification from AppHQ console A. After registering for PushNotification go to AppHQ console and click on PushNotification and select application after selecting User tab.

B. Select desired user from registered User-list and click on Send Message Button.

C. Send appropriate message to the user by clicking Send Button.

Design Details: Following are the high level design details which includes different App42 API usages for integration purpose in the sample.

1. Send PushNotification to User using JavaScript App42 API : If you want to send PushNotification message using App42 API , pass the userId and message in this method written in 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 PushNotification to all users using JavaScript App42 API : If you want to send PushNotification message to all users using App42 API , pass message in this method written in index.html file. function sendPushMessageToAll() { var push = new App42Push(); var message = document.getElementById('msg').value; push.sendPushMessageToAll(message); }

3. Customize PushNotification Message: You can also customize your PushNotification message by changing the following code in 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);

4. Calling JavaScript pushMessageAlert (msg) function from Android native code: Whenever PushNotification comes on device we have to render it on HTML page. public void renderData(final String message) { try { Thread.sleep(5000); super.loadUrl("javascript:pushMessageAlert(\"" + message + "\")"); } catch (InterruptedException e) {

e.printStackTrace(); } }

5. Rendering PushNotification on HTML Page: Whenever PushNotification comes on device we have to render it on HTML page. Following function is called from Android native and render PushNotification on 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 device Id on App42 to get PushNotification. 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 token on App42 using JavaScript API , called from 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 PhoneGap API then make following changes in your AndroidManifest.xml using this sample’s AndroidManifest.xml file.

1. Add 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" />

2.Add 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>

3.Declare Service in your AndroidManifest.xml file.

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

If you have any questions or need any further assistance to integrate this, please feel free to write us at support@shephertz.com.