Hi all,
Below code segments showing how to configure Mobile app to receiving Push notification with windows azure.In this article. I will show you how to get it done with GCM(for android).APNS(IOS)code will also provide, but you have to configure with your Apple developer account.
Step 1:
Create project in developer console and note down the project no.
Note: you should enable google cloud message service after you created the project.
After that Click on credetials and copy the api key.
Then click on the project name and add IP 0.0.0.0/0 and save.
That’s it from GCM side.now we will move to Azure.provide your GCM API key like below.
(in configure section).
Add below fuction call to onDeviceready().
var pushNotification;
var mobileServiceClient;function onDeviceReady()
{InitpushNotificaions();
}
this function will register your app in azure and let you to receive notification pushes from azure.
- Give your mobile service url and api key as parameters
function InitpushNotificaions() {
try {
mobileServiceClient = new WindowsAzure.MobileServiceClient(‘https://yourazuremobileservice.azure-mobile.net/’, ‘RvahPxHKoEsGiLdlCYZpHBxxxxxx’);
pushNotification = window.plugins.pushNotification;
if (device.platform == ‘android’ || device.platform == ‘Android’ ||
device.platform == ‘amazon-fireos’)
{
// AndroId
Give your project number here.
pushNotification.register(successHandler, errorHandler, { “senderID”: “projectno724086x51xxx”, “ecb”: “onNotification” }); // required!
}
else
{
//IOS
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
onNotificationAPN=function (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
onNotification = function (e) {switch (e.event) {
case ‘registered’:
if (e.regid.length > 0) {
// 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.
if (mobileServiceClient) {
// Template registration.
var template = “{ \”data\” : {\”message\”:\”$(message)\”}}”;
// Register for notifications.
mobileServiceClient.push.gcm.registerTemplate(e.regid,
“myTemplate”, template, null)
.done(function () {
// alert(‘Registered template with Azure!’);
}).fail(function (error) {
//alert(‘Failed registering with Azure: ‘ + error);
});
}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) {// 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(“/res/” + beep.wav);
alert(“Message:”+e.message);
my_media.play();
}
else { // otherwise we were launched because the user touched a notification in the notification tray.
if (e.coldstart) {}
else {}
}
break;case ‘error’:
break;default:
break;
}
}
function tokenHandler(result)
{mobileServiceClient = new WindowsAzure.MobileServiceClient(‘https://yourazuremobileservice.azure-mobile.net/’, ‘RvahPxHKoEsGiLxxxxxxBxxSVxxl66’);
if (mobileServiceClient) {// Create the integrated Notification Hub client.
var hub = new NotificationHub(mobileServiceClient);// This is a template registration.
var template = “{\”aps\”:{\”alert\”:\”$(message)\”}}”;// Register for notifications.
// (deviceId, [“tag1″,”tag2”], templateName, templateBody, expiration)
hub.apns.register(result, null, “iosTemplate”, template, null).done(function () {
alert(“Registered with hub!”);
}).fail(function (error) {
//alert(“Failed registering with hub: ” + error);
});
}function successHandler(result) {
// alert(“Success handler:” + result);
// $(“#app-status-ul”).append(‘<li>success:’+ result +'</li>’);
}function errorHandler(error) {
alert(“Error handler:” + error);
}
Last thing you have to do is, in your config.xml file add followings.
<gap:plugin name=”com.phonegap.plugins.pushplugin” version=”2.5.0″ />
<access origin=”https://yourmobileserviceurl.azure-mobile.net/”/>
we are done.build it with phonegap buid Use debug option in azure push to see the notification(choose custom(template).
The sample application download.
mzonerz 