Push notifications for android application using PhoneGap, Html, javascript and C#
Hello folks,
Last time we had documented the steps for successfully building an android application which can access the camera and gallery. You can find the link to blog here.
This blog talks about enabling push notifications in your application.
Let's get started!
Now your command prompt will look something like this:
Now you entire config.xml will look something like this. Make sure you replace your config.xml with the code below.
Be sure to replace the senderID with your project ID.
Last time we had documented the steps for successfully building an android application which can access the camera and gallery. You can find the link to blog here.
This blog talks about enabling push notifications in your application.
Let's get started!
Step 1
You will need to register your project with Google Cloud Messaging in the Android Developers Console.
Once you have done that you will need to note down the:
- Google Cloud Messaging Project ID
- Google Cloud Messaging API Key for the above Project ID
Step 2
Create an application named "PushNotificationsTest".
If you need help creating an application, please refer my earlier blog.
You need to run the following code in the command prompt:
cordova create PushNotificationsTest com.example.pushnotificationstest PushNotificationsTest
Now your command prompt will look something like this:
Step 3
Now that the application is created, let us come to the next step.
Add the PushPlugin package in the application as follows:
cordova plugin add com.phonegap.plugins.pushplugin
Step 4
Now, look for the 'PushNotification.js' file. You can follow this path if you have built the project in C drive - "C:\PushNotificationsTest\plugins\com.phonegap.plugins.PushPlugin\www\PushNotifications.js"
Also look for 'jquery_1.5.2.min.js' in this path - "C:\PushNotificationsTest\plugins\com.phonegap.plugins.PushPlugin\Example\www\jquery_1.5.2.min.js"
Also look for 'jquery_1.5.2.min.js' in this path - "C:\PushNotificationsTest\plugins\com.phonegap.plugins.PushPlugin\Example\www\jquery_1.5.2.min.js"
Paste both the JavaScript files in the base project folder.
Follow this path - "C:\PushNotificationsTest\www\js"
Step 5
config.xml
The reference for PushNotification should be added in the config.xml. The reference code is as follows:
<feature name="PushPlugin" >
<param name="android-package" value="com.amazon.cordova.plugin.PushPlugin"/>
</feature>
Now you entire config.xml will look something like this. Make sure you replace your config.xml with the code below.
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.example.PushNotificationsTest" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">
<name>PushNotificationsTest</name>
<description>
Push Notifications Test
</description>
<author email="me@aakshay.com" href="http://www.aakshay.com">
Aakshay S
</author>
<content src="index.html" />
<preference name="permissions" value="none" />
<preference name="orientation" value="default" />
<preference name="target-device" value="universal" />
<preference name="fullscreen" value="true" />
<preference name="webviewbounce" value="true" />
<preference name="prerendered-icon" value="true" />
<preference name="stay-in-webview" value="false" />
<preference name="ios-statusbarstyle" value="black-opaque" />
<preference name="detect-data-types" value="true" />
<preference name="exit-on-suspend" value="false" />
<preference name="show-splash-screen-spinner" value="true" />
<preference name="auto-hide-splash-screen" value="true" />
<preference name="disable-cursor" value="false" />
<preference name="android-minSdkVersion" value="7" />
<preference name="android-installLocation" value="auto" />
<gap:plugin name="org.apache.cordova.battery-status" />
<feature name="Device">
<param name="android-package" value="org.apache.cordova.device" />
</feature>
<feature name="PushPlugin" >
<param name="android-package" value="com.amazon.cordova.plugin.PushPlugin"/>
</feature>
<feature name="Camera">
<param name="android-package" value="org.apache.cordova.camera.CameraLauncher" />
</feature>
<gap:plugin name="org.apache.cordova.media-capture" />
<gap:plugin name="org.apache.cordova.console" />
<gap:plugin name="org.apache.cordova.contacts" />
<gap:plugin name="org.apache.cordova.device-motion" />
<gap:plugin name="org.apache.cordova.device-orientation" />
<gap:plugin name="org.apache.cordova.dialogs" />
<gap:plugin name="org.apache.cordova.file" />
<gap:plugin name="org.apache.cordova.file-transfer" />
<gap:plugin name="org.apache.cordova.geolocation" />
<gap:plugin name="org.apache.cordova.globalization" />
<gap:plugin name="org.apache.cordova.inappbrowser" />
<gap:plugin name="org.apache.cordova.media" />
<gap:plugin name="org.apache.cordova.network-information" />
<gap:plugin name="org.apache.cordova.splashscreen" />
<gap:plugin name="org.apache.cordova.vibration" />
<icon src="icon.png" />
<icon gap:platform="android" gap:qualifier="ldpi" src="www/res/icon/android/icon-36-ldpi.png" />
<icon gap:platform="android" gap:qualifier="mdpi" src="www/res/icon/android/icon-48-mdpi.png" />
<icon gap:platform="android" gap:qualifier="hdpi" src="www/res/icon/android/icon-72-hdpi.png" />
<icon gap:platform="android" gap:qualifier="xhdpi" src="www/res/icon/android/icon-96-xhdpi.png" />
<gap:splash gap:platform="android" gap:qualifier="port-ldpi" src="www/res/screen/android/screen-ldpi-portrait.png" />
<gap:splash gap:platform="android" gap:qualifier="port-mdpi" src="www/res/screen/android/screen-mdpi-portrait.png" />
<gap:splash gap:platform="android" gap:qualifier="port-hdpi" src="www/res/screen/android/screen-hdpi-portrait.png" />
<gap:splash gap:platform="android" gap:qualifier="port-xhdpi" src="www/res/screen/android/screen-xhdpi-portrait.png" />
<access origin="*" />
</widget>
Step 6
index.html
You can replace the index.html file in your base project folder with the code below:
<!DOCTYPE HTML>
<html>
<head>
<title>com.PhoneGap.c2dm</title>
</head>
<body>
/*
NOTE:
This demo uses these plugins:
Cordova Device Plugin: http://plugins.cordova.io/#/package/org.apache.cordova.device
Cordova Media Plugin: http://plugins.cordova.io/#/package/org.apache.cordova.media
To add them via the CLI:
$ cordova plugin add org.apache.cordova.device
$ cordova plugin add org.apache.cordova.media
*/
<!--<script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>-->
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery_1.5.2.min.js"></script>
<script type="text/javascript" src="js/PushNotification.js"></script>
<script type="text/javascript">
var pushNotification;
function onDeviceReady() {
$("#app-status-ul").append('<li>deviceready event received</li>');
document.addEventListener("backbutton", function(e)
{
$("#app-status-ul").append('<li>backbutton event received</li>');
if( $("#home").length > 0)
{
// call this to get a new token each time. don't call it to reuse existing token.
//pushNotification.unregister(successHandler, errorHandler);
e.preventDefault();
navigator.app.exitApp();
}
else
{
navigator.app.backHistory();
}
}, false);
try
{
pushNotification = window.plugins.pushNotification;
$("#app-status-ul").append('<li>registering ' + device.platform + '</li>');
if (device.platform == 'android' || device.platform == 'Android' ||
device.platform == 'amazon-fireos' ) {
pushNotification.register(successHandler, errorHandler, {"senderID":"661780372179","ecb":"onNotification"}); // required!
} else {
pushNotification.register(tokenHandler, errorHandler, {"badge":"true","sound":"true","alert":"true","ecb":"onNotificationAPN"}); // required!
}
}
catch(err)
{
txt="There was an error on this page.\n\n";
txt+="Error description: " + err.message + "\n\n";
alert(txt);
}
}
// handle APNS notifications for iOS
function onNotificationAPN(e) {
if (e.alert) {
$("#app-status-ul").append('<li>push-notification: ' + e.alert + '</li>');
// showing an alert also requires the org.apache.cordova.dialogs plugin
navigator.notification.alert(e.alert);
}
if (e.sound) {
// playing a sound also requires the org.apache.cordova.media plugin
var snd = new Media(e.sound);
snd.play();
}
if (e.badge) {
pushNotification.setApplicationIconBadgeNumber(successHandler, e.badge);
}
}
// handle GCM notifications for Android
function onNotification(e) {
$("#app-status-ul").append('<li>EVENT -> RECEIVED:' + e.event + '</li>');
switch( e.event )
{
case 'registered':
if ( e.regid.length > 0 )
{
$("#app-status-ul").append('<li>REGISTERED -> REGID:' + e.regid + "</li>");
// Your GCM push server needs to know the regID before it can push to this device
// here is where you might want to send it the regID for later use.
console.log("regID = " + e.regid);
}
break;
case 'message':
// if this flag is set, this notification happened while we were in the foreground.
// you might want to play a sound to get the user's attention, throw up a dialog, etc.
if (e.foreground)
{
$("#app-status-ul").append('<li>--INLINE NOTIFICATION--' + '</li>');
// on Android soundname is outside the payload.
// On Amazon FireOS all custom attributes are contained within payload
var soundfile = e.soundname || e.payload.sound;
// if the notification contains a soundname, play it.
// playing a sound also requires the org.apache.cordova.media plugin
var my_media = new Media("/android_asset/www/"+ soundfile);
my_media.play();
}
else
{ // otherwise we were launched because the user touched a notification in the notification tray.
if (e.coldstart)
$("#app-status-ul").append('<li>--COLDSTART NOTIFICATION--' + '</li>');
else
$("#app-status-ul").append('<li>--BACKGROUND NOTIFICATION--' + '</li>');
}
$("#app-status-ul").append('<li>MESSAGE -> MSG: ' + e.payload.message + '</li>');
//android only
$("#app-status-ul").append('<li>MESSAGE -> MSGCNT: ' + e.payload.msgcnt + '</li>');
//amazon-fireos only
$("#app-status-ul").append('<li>MESSAGE -> TIMESTAMP: ' + e.payload.timeStamp + '</li>');
break;
case 'error':
$("#app-status-ul").append('<li>ERROR -> MSG:' + e.msg + '</li>');
break;
default:
$("#app-status-ul").append('<li>EVENT -> Unknown, an event was received and we do not know what it is</li>');
break;
}
}
function tokenHandler (result) {
$("#app-status-ul").append('<li>token: '+ result +'</li>');
// Your iOS push server needs to know the token before it can push to this device
// here is where you might want to send it the token for later use.
}
function successHandler (result) {
$("#app-status-ul").append('<li>success:'+ result +'</li>');
}
function errorHandler (error) {
$("#app-status-ul").append('<li>error:'+ error +'</li>');
}
document.addEventListener('deviceready', onDeviceReady, true);
</script>
<div id="home">
<div id="app-status-div">
<ul id="app-status-ul">
<li>Cordova PushNotification Plugin Demo</li>
</ul>
</div>
</div>
</body>
</html>
Step 7
Now build the project with the following code in the command prompt:
"cordova build android"
When you install the APK in your device, you will get the registration ID for that device.
In the next tutorial, we will see how to send Push Notifications to the device using this registration ID.
Peace and cheers!
