Azure Push Notifications with iOS Badges on Cordova/Phonegap

Question

I've got the following code that can send push notifications using Azure Notification Hubs. When a new item is inserted into the database, this code sends a push notification to the devices registered with the tag.

I'm using Ionic/Phonegap for the iOS app and the ngCordova Push Plugin. I want to add badge counts for iOS devices, but I can't seem to find a way to do this. I've tried using the push.apns.send function, but can't get it to work.

Azure Mobile Services

function insert(item, user, request) {
    // Execute the request and send notifications.
    request.execute({
       success: function() { 
            // Create a template-based payload.
            var payload = '{ "message" : "This is my message" }';            

            push.send("My Tag", payload, {          
               success: function(pushResponse){ 
                   // Send the default response.
                   request.respond();
               },              
               error: function (pushResponse) {
                   console.log("Error Sending push:", pushResponse);
                    // Send the an error response.
                   request.respond(500, { error: pushResponse });
                   }           
            });                
       }
   });   
}

Phonegap

var iosConfig = {
    "badge": true,
    "sound": true,
    "alert": true
};

$cordovaPush.register(iosConfig).then(function (deviceToken) {
    var hub = new NotificationHub(mobileClient);

    // This is a template registration.
    var template = "{\"aps\":{\"alert\":\"$(message)\"}}";

    // Register for notifications.
    // (deviceId, ["tag1","tag2"], templateName, templateBody, expiration)
    hub.apns.register(deviceToken, myTags, "myTemplate", template, null).done(function () {
        // Registered with hub!
    }).fail(function (error) {
        alert("Failed registering with hub: " + error);
    });

}, function (err) {
    alert("Registration error: " + err)
});

I've searched through dozens of articles/tutorials and none of them work. Any help would be greatly appreciated.

I think the issue might be the template registration in the Phonegap code. I'll have to look into more to make sure. — oalbrecht

oalbrecht oalbrecht · Accepted Answer · 2015-08-15T02:26:48

I finally figured it out. The issue was that the template registration needed to include the badge. Here's what works:

Azure Mobile Services

function insert(item, user, request) {
    // Execute the request and send notifications.
    request.execute({
       success: function() { 
            // Create a template-based payload.
            var payload = '{ "message" : "' + originalMessage + '", "badge" : "100" }';            

            push.send("My Tag", payload, {          
               success: function(pushResponse){ 
                   // Send the default response.
                   request.respond();
               },              
               error: function (pushResponse) {
                   console.log("Error Sending push:", pushResponse);
                    // Send the an error response.
                   request.respond(500, { error: pushResponse });
                   }           
            });                
       }
   });   
}

Phonegap

var iosConfig = {
    "badge": true,
    "sound": true,
    "alert": true
};

$cordovaPush.register(iosConfig).then(function (deviceToken) {
    var hub = new NotificationHub(mobileClient);

    // This is a template registration.
    var template = "{\"aps\":{\"alert\":\"$(message)\",\"badge\":\"#(badge)\" }}";

    // Register for notifications.
    // (deviceId, ["tag1","tag2"], templateName, templateBody, expiration)
    hub.apns.register(deviceToken, myTags, "myTemplate", template, null).done(function () {
        // Registered with hub!
    }).fail(function (error) {
        alert("Failed registering with hub: " + error);
    });

}, function (err) {
    alert("Registration error: " + err)
});

Azure Push Notifications with iOS Badges on Cordova/Phonegap

1 Answers