Urban Airship integration to receive Push Notification in iOS using PhoneGap

Push Notification is a mechanism, which allows an application to notify the user about any new events without opening the application, same as a SMS pops up on our mobile screen. Push Notification can work both in background and foreground, so this is a nice way to interact with the application in the background.

Urban Airship provides easy and effective solution to push the notification to user. It can act as as a middle layer which will help us to send the notification from our server routing it through the Apple Notification Server.
So in this blog we will discuss the use of Urban Airship to send push notification to our application. Here are the steps bellow, which will guide us in the process of integrating the Urban Airship plugin in iOS application using PhoneGap version 2.6.0.

Step #1:
Download the plugin for Urban Airship from github with this URL.


Step #2:
Drag the PushNotificationPlugin.h and PushNotificationPlugin.m files into the Plugins directory in Xcode and choose the Create folder references for any added folders option while adding the reference.
The files can found at phonegap-ua-push-1.0.8\ios-sample\UAPhonegapSample\Plugins\PushNotificationPlugin.


Step #3:
Add the plugin reference in config.xml like this

	<plugin name="PushNotificationPlugin" value="PushNotificationPlugin" onload="true"/>

Step #4:
Get the Airship file from src/ios/Airship directory by using this from folowing url.


Step #5:
Get the AirshipConfig.plist.sample file from phonegap-ua-push-1.0.8\ios-sample\UAPhonegapSample and remove the .sample extention.

Step #6:
Drag both the Airship and AirshipConfig.plist into the project directory and choose the option Create groups for any added folder while dragging the files.

Step #7:
Add the development/production app key and app secret key in AirshipConfig.plist file.

	"DEVELOPMENT_APP_KEY" = "Development App Key";
	"DEVELOPMENT_APP_SECRET" = "Development App Secret";
	"PRODUCTION_APP_KEY" = "Production App Key";
	"PRODUCTION_APP_SECRET" = "Production App Secret";

Step #8:
Open the Build Settings tab and search for Header Search Path, then add ./Airship as a Header Path.

Step #9:
In the Project Build Phases tab, choose the Link Binary with Libraries dropdown box and add the following frameworks into the application.

– CFNetwork.framework
– CoreGraphics.framework
– Foundation.framework
– MobileCoreServices.framework
– Security.framework
– SystemConfiguration.framework
– UIKit.framework
– libz.dylib
– libsqlite3.dylib
– CoreTelephony.framework
– CoreLocation.framework
– AudioToolbox.framework
– StoreKit.framework

Step #10:
Copy the PushNotification.js file from phonegap-ua-push/plugin-common directory and add the reference in the html page.

Step #11:
Now use the following JavaScript to get the device token for the application.

var push = window.pushNotification;

// Callback for when a device has registered with Urban Airship.
push.registerEvent('registration', function (error, id) {
    if (error) {
        console.log('There was an error registering for push notifications.');
    } else {
        console.log("Registered with ID: " + id);

// Callback for when the app is running, and receives a push.
push.registerEvent('push', function (push) {
    console.log("Got push: " + push.message)

// Callback for getting the device token.
push.getPushID(function (id) {
          if(id) {
             navigator.notification.alert("Got push ID: " + id);

We can also follow the link bellow to use the Urban Airship plugin in PhoneGap version 2.9 or later.


So using the above steps we can integrate the Urban Airship plugin in PhoneGap application to get push notification.

Written By: Sourabha Kumar Sahoo, Software Developer, Mindfire Solutions


One thought on “Urban Airship integration to receive Push Notification in iOS using PhoneGap

  1. Pingback: Urban Airship integration to receive Push Notification in iOS using PhoneGap | souravsahoo

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s