Site navigation

Social networks

Contact us

Integrating Push Notifications for Cross-Platform Apps

At WeezLabs, most of our customers ask us to develop an app not for just one device, but for a variety of different platforms. Cross-Platform development enables us to build the app for multiple devices in less time, and it’s usually more cost effective for the client, since building the app natively on different devices can add considerable time and cost to the project.

Cross-Platform development is a must from so many of our clients, and another frequently requested feature is Push Notification Service. However, Push Notifications are not included in the PhoneGap API.

So how would you implement push notifications on a Cross-Platform App? Let’s take a look at the following test case where we implemented Push Notifications on an Android App. This solution can also be implemented to iOS, Blackberry and Windows Phone apps as well.
http://weezlabs.com/Content/Default/Images/Posts/img01-products-overview-push.png

In this post I’m going to look at two libraries that can be used for adding Push Notifications in PhoneGap. They are Urban Airship and Poosh Woosh.

For this project, WeezLabs’ goal was to find a library that was cross-platform compatible, and had an integrated delivery service.

After searching through the available options, I set my sights on two libraries: Urban Airship and Poosh Woosh. Each has their own strengths and weaknesses, and in the end, the best choice is based on the needs of your own app.

Versions

Urban Airship comes in 3 different versions: ‘Enterprise Edition’, ‘Small Business Edition’ and ‘Developer Edition’, which is the only one that’s free. You can check out how the features and prices for Ubran Airship break down here: http://urbanairship.com/products/how-to-buy.

Push Woosh also has several versions: Free, Premium, Gold, and Platinum. This is explained in detail on their site: https://cp.pushwoosh.com/products

For the purposes of our investigation, we’ll be looking at both free versions of Urban Airship and Push Woosh.

Differences

Urban Airship you can send up to 1 million push notifications per month, while using Push Woosh you can send push notifications to up to 1 million devices. Keep in mind that you don’t get access to API, geo-zones and tags when using the Free version of Push Woosh, and the maximum number of applications you can use this for are limited to 10. While you’re limited to a million push notifications in the free version, Urban Airship provides a lot of flexibility for developers, interfaces can be completely adjusted to your need, it’s scalable to the requirements of your app and its users.

Linking up the APIs

In order for us to proceed with our development, we’re going to need the Google API for our project. Here’s what you’ll need to do:
1. Go to https://code.google.com/apis/console and create a new project

http://weezlabs.com/Content/Default/Images/Posts/img02-gcm-create-api-proj.png

2. When the project is created in the browser there will have a link like this:
https://code.google.com/apis/console/#project:4815162342
where 4815162342 is a gsmSender for airshipconfig.properties file.

3. Make sure you switch on Google Cloud Messaging for Android in the Services tab.

http://weezlabs.com/Content/Default/Images/Posts/img03-google-cloud-message.png

4. Select "Create a new Server key..." in the API Access tab. Do not enter anything in the open field, just click the “Create” button.

http://weezlabs.com/Content/Default/Images/Posts/img04-config-server-key.png

5. You will need this generated API key for your previously created Urban Airship profile.

http://weezlabs.com/Content/Default/Images/Posts/img05-simple-api-access.png

Adding Urban Airship

http://weezlabs.com/Content/Default/Images/Posts/img06-developer.png

Now you should download the library
http://com.urbanairship.filereleases.s3.amazonaws.com/ua-android-lib-latest.zip
And get a test example https://github.com/urbanairship/phonegap-ua-push from Urban Airship’s official website http://urbanairship.com/resources/developer-resources.

Next, export the project to Eclipse and add the downloaded library into it.
Then here comes the fun part – you must sort out the keys that are located in airshipconfig.properties file:

http://weezlabs.com/Content/Default/Images/Posts/img07-assets.png
Go to the Urban Airship profile https://go.urbanairship.com/apps/new/ and create a new app. Keep in mind, that the received API key must be entered in the CGM API Key field.

http://weezlabs.com/Content/Default/Images/Posts/img08-gcm-api-key.png

In the Details tab of the created project: Application Key is developmentAppKey in the airshipconfig.properties file, and Application Secret is developmentAppSecret.

http://weezlabs.com/Content/Default/Images/Posts/img09-android-simple-details.png


We’re almost there! The moment has arrived to launch the app. Don’t forget to make sure that you have an active internet connection.
To send Push Notifications:
1. Look through the log and find a similar line. Copy push ID, that you will need later to send Push Notification to a particular device.

http://weezlabs.com/Content/Default/Images/Posts/img10-got-push-id.png

2. In the profile https://go.urbanairship.com/ go to Push tab --> Test Push Notifications and select Android. You’ll need to enter the previously copied push ID into Apid field, Application Key into Extra key field, and Application Secret into Extra value field. Alert is the message that must be sent.

http://weezlabs.com/Content/Default/Images/Posts/img11-push-android.png

3. Now, let’s check it! Press “Send it!” When you click on Push Notifications, you switch to the app itself.

http://weezlabs.com/Content/Default/Images/Posts/img12-urban-airship.png

Push Woosh

Adding Push Woosh to your app is very similar to what we did with Urban Airship.
You can download a test example for Push Woosh on PhoneGap here: https://github.com/shaders/push-notifications-sdk/tree/master/SDK%20Sample%20Projects/Android-Phonegap
It’ll be necessary to register at https://cp.pushwoosh.com and create an application. To show an example of it working with the app let’s enter API key, received from Google.

http://weezlabs.com/Content/Default/Images/Posts/img13-android-notifications.png

Then exchange projectId in the code of index.js file for its own Id, and enter the code received from Push Woosh into the appid field:

http://weezlabs.com/Content/Default/Images/Posts/img14-test-application-code.png

Now you can send a Push Notification from Push Woosh (no need to add any additional coding for any other devices).

http://weezlabs.com/Content/Default/Images/Posts/img15-woosh.png

WeezLabs, Inc. is a developer of high quality, custom-made web and mobile app experiences. For more information about our work and how we can integrate push notifications to your app, visit us at WeezLabs.com.
Andrey Kudievskiy

ABOUT

WEEZLABS

Not just another web and mobile apps development company!

WeezLabs is about dreaming big and helping our clients reach their full potential.

LEARN MORE

VISIT OUR OFFICE:

1848 Lincoln Blvd, Suite #100,
Santa Monica, CA 90404

TELL US HOW

WE CAN HELP

Call us 310.776.6234 or complete the form below.