Urban Airship Push for PhoneGap

By Steven Osborn on June 9, 2010

PhoneGap is an awesome open-source project by the guys at Nitobi that provides tools for building cross-platform mobile applications using HTML and Javascript. Using the plugin provided here you can begin sending push notifications from Urban Airship to your PhoneGap application quickly and painlessly.

The first thing you’ll need to do is download: the plugin and sample code.

To get started, create a folder named Plugins in your project folder if it does not exist. Then add PushNotification.h and PushNotification.m to it. Now copy PushNotification.js to /PROJECT_PATH/www/. Note that the plugin sample code also contains an index.html. We won’t be using it in this example, but is provided for reference.

Import PushNotification.js via a script tag in the <head> of your application.

<script src="PushNotification.js" type="text/javascript"><!--mce:0--></script>

Now in some <script> tags you’ll want to add the following code to your application. The block below handles registering your application for push notifications with Apple and then sending the device token Apple returns to Urban Airship for registration.

// app key and secret for your Urban Airship application
var HOST = 'https://go.urbanairship.com/';
var KEY = '';
var SECRET = '';
 
// When this function is called, PhoneGap has been initialized and is ready to roll
function onDeviceReady() {
    navigator.pushNotification.startNotify();
    registerAPN();
}
 
// Register device for push with Apple.  success and error callbacks passed along
// with the push features your app is requesting
function registerAPN() {
    navigator.pushNotification.register(successCallback, errorCallback,
        { alert:true, badge:true, sound:true });
}
 
// Callback when receiving notification.  This method is only called
// when your application receives a push notification while it is open.
PushNotification.prototype.notificationCallback = function (notification) {
	var msg = '';
	for (var property in notification) {
		msg += property + ' : ' + notification[property] + '\n';
	}
	alert(msg);
};
 
// when register APN succeeded
function successCallback(e) {
    alert("Device registered. Device token: " + e.deviceToken);
    registerUAPush(e.deviceToken); //register token with UA
}
 
// when register APN failed
function errorCallback(e) {
    alert('Error during registration: '+e.error);
}
 
// register with Urban Airship push service
function registerUAPush(deviceToken) {
    // open the client and encode our URL
    var request = new XMLHttpRequest();
    request.open('PUT', HOST+'api/device_tokens/'+deviceToken, true, KEY, SECRET);
 
    // callback when request finished
    request.onload = function() {
        if(this.status == 200 || this.status == 201) {
            alert('UA push service successfully registered.');
        } else {
            alert('Error when registering UA push service.\nError: '+this.statusText);
        }
    };
    request.send();
}

You can also check out index.html included in the sample code for a more detailed implementation.

Now, you’re good to go. Your application has registered that device with Urban Airship. All you have to do to send a push notification to that device is send an HTTP POST request to Urban Airship’s REST API.

Once you have this working, it’s trivial to take advantage of other Urban Airship Push features such as tags, aliases, broadcast, and auto-badge.

We’re looking forward to seeing what kind of great things people build using PhoneGap with Urban Airship – be sure to drop us a line when your app goes live!

Posted in Partnerships, push • Tagged with ,

4 Responses

  1. Nick Francis at 5:40 pm on June 9, 2010

    Huge feature guys, sounds awesome!

  2. Daniel Kim at 9:09 pm on June 11, 2010

    Wow! Sounds Great!
    Any plan for support in-app-purchase in near future?

    Thanks guys!

  3. Dan at 2:31 pm on July 2, 2010

    Awesome, will the JS lib support Android phonegap as well? Or is it currently specific to the iPhone? Looking to support and android app with push notifications and want to use UA to deliver.

  4. Sam (MosaLingua) at 10:25 am on July 7, 2010

    Sounds really great, but would be even better with in-app-purchase !

Additional comments powered by BackType