Easy PhoneGap Push Notifications with Pushwoosh

December 4, 2012By

I recently posted regarding the use of Push Notifications on both iOS and Android with PhoneGap. Both of those addressed sending push notifications from a general 3rd party server where you write the server side push code. However, there are many services out there you can leverage for sending push notifications as well and this post will address Pushwoosh in particular.

What’s nice about Pushwoosh is they have a free offering with basic push features to get you started and their service applies to multiple platforms in general as well as offering plugins and samples for PhoneGap applications targeting iOS, Android, and Windows Phone 7. I noticed there also appears to be a plugin available and supported with PhoneGap Build. With all the PhoneGap support it seemed like a great service to blog about in addition to my recent push notification posts.

Overview

To use Pushwoosh, your PhoneGap application uses a PushNotification plugin to communicate with the Pushwoosh APIs. You configure this plugin just like any other. For iOS you add it to the Cordova.plist and put the classes in the plugins folder. Below is an example of how the plugin looks in the Cordova.plist.

For Android you include the jars/java files and add the plugin to the list of plugins for your app (usually in config.xml or cordova.xml), for instance:

<plugins>
...
    <plugin name="Camera" value="org.apache.cordova.CameraLauncher"/>
    <plugin name="Contacts" value="org.apache.cordova.ContactManager"/>
    <plugin name="PushNotification" value="com.pushwoosh.test.plugin.pushnotifications.PushNotifications" onload="true"/>
...
</plugins>

For both platforms you’ll see a PushNotification.js file in the samples that has a set of calls for registering/unregistering for push notifications, as well as some other nice functions (sending current location, getting status etc), an excerpt is shown below:

...
	// Call this to register for push notifications and retreive a deviceToken
	PushNotification.prototype.registerDevice = function(config, success, fail) {
		cordova.exec(success, fail, "PushNotification", "registerDevice", config ? [config] : []);
	};

	// Call this to set tags for the device
	PushNotification.prototype.setTags = function(config, success, fail) {
		cordova.exec(success, fail, "PushNotification", "setTags", config ? [config] : []);
	};

	//Android Only----
	PushNotification.prototype.unregisterDevice = function(success, fail) {
		cordova.exec(success, fail, "PushNotification", "unregisterDevice", []);
	};
	
	PushNotification.prototype.startGeoPushes = function(success, fail) {
		cordova.exec(success, fail, "PushNotification", "startGeoPushes", []);
	};

	PushNotification.prototype.stopGeoPushes = function(success, fail) {
		cordova.exec(success, fail, "PushNotification", "stopGeoPushes", []);
	};

	//Android End----
	
	//iOS only----
	// Call this to send geo location for the device
	PushNotification.prototype.sendLocation = function(config, success, fail) {
		cordova.exec(success, fail, "PushNotification", "sendLocation", config ? [config] : []);
	};
..
Actual example usage of the PushNotification.js calls from JavaScript can be found under the Android Setup section further on in this post…

Getting Started

It will save you time to keep this link open in a browser for the Pushwoosh documentation reference.
  • Go to the Pushwoosh website, click on Start Now and sign up for a free account/
  • Once logged in, you will be taken to an applications page.
  • Create a new application and name it something meaningful to you. The name doesn’t have to match anything in particular, but you will use the associated app id (more to come on that).
  • Once created, configure the different platforms your application will run on. In my case I just configured iOS and Android for use with a PhoneGap application.
  • Android Configuration requires a Google Cloud Messaging API Key (see below for more setup details):
  • iOS Configuration requires your Apple certificate (.cer file) and key (.p12) if you’re using the manual and free service:

    There’s a guide to specifically getting the certificate and key set up through Apple here, or you can also visit my Push Notifications for iOS post.

    Be sure to use the exact app ID and package name chosen in the Apple Developer Portal in your iOS application in XCode as well. If you’ve ever done push notifications with iOS this should be a familiar process to you.

    If you have a premium account much of this manual configuration work can be done for you by just entering your Apple credentials in the Auto tab above.

Android Application Setup

Requirements

  • Google Cloud Messaging (GCM) Project Number
    It can be found in the URL after the #project, for example my GCM console URL is: https://code.google.com/apis/console/#project:824842663931, so my GCM project # is 824842663931.
  • Pushwoosh App ID
    This is found when you click on any of the applications defined within Pushwoosh, such as circled in the screenshot below:

Steps

  1. Download the Pushwoosh Android for PhoneGap sample either from the Pushwoosh applications page by hovering over the platform such as shown in the screenshot below, or go to this link to always grab the latest (be sure to pick the Android-PhoneGap link).
  2. Now follow these instructions to make your application work with Pushwoosh. Step 6 is where you need to use your own GCM project number and Pushwoosh app id as noted in the requirements. Here’s an example of some code to register the device and listen for push notifications:
    initPushwoosh: function() {
        	var pushNotification = window.plugins.pushNotification;
    	pushNotification.registerDevice({ projectid: "824842663931", appid : "A49E7-43076" },
    	        function(status) {
    	            var pushToken = status;
    	            console.warn('push token: ' + pushToken);
    	        },
    	        function(status) {
    	            console.warn(JSON.stringify(['failed to register ', status]));
    	        }
    	);
        	document.addEventListener('push-notification', function(event) {	    	
    	        var title = event.notification.title;
    	        var userData = event.notification.userdata;
    	        if (typeof(userData) != "undefined") {
    	           console.warn('user data: ' + JSON.stringify(userData));
    	        }	 
    	        navigator.notification.alert(title);
    	});
        },
    
By default you will not see notifications while the application is running or in the foreground. If you would like to still receive them while the application is open on Android, uncomment the following line in the PushNotification.java code:

//uncomment this code if you would like to receive the notifications in the app bypassing notification center if the app is in the foreground
cordova.getActivity().registerReceiver(mReceiver, intentFilter);

iOS Application Setup

  1. Retrieve your Pushwoosh App ID. As above, this is found when you click on any of the applications defined within Pushwoosh, such as circled in the screenshot below:

  2. Next simply follow the in-depth instructions here.

Other Cool Stuff

  • Stats
    The Pushwoosh web client also has a Stats page to help you determine how many messages you’ve pushed etc. You can also determine if the messages were successful or potential errors by combining data here along with the Pushes page. Here are a couple of screenshots from Stats and Pushes pages respectively:


  • Advanced Notifications
    You can configure more advanced notifications that can have the notification open a URL or custom page when clicked containing HTML content and images etc. You can also set a special sound for iOS and Android, a badge (iOS), and options in the advanced notifications options.
  • Here’s a screenshot of how you can use their website to create a new page to be shown upon notification click:

    And here it is when opened on iOS from clicking the notification:

  • Geozones
    You can set up locations as zones to automatically push messages to the device when it has entered that zone through their Geozones feature. This is very useful for geofencing type apps. More to come in a further blog post on that!
  • Tags
    Use their API’s for setting tags to identify different types of users or preferences etc. More information about Pushwoosh and using tags can be found here.
    The PhoneGap plugins for Pushwoosh include support for this as well :).

  • Great Support
    I was very impressed with the support I received while trying out this service. They were quick to respond with meaningful information and went out of their way to add some additional code to aid in some specific testing I was doing to try out their geozones offering which I will be posting about specifically next.
  • New Features Coming…
    In my exchanges I was also informed of some cool new features in the works and big enhancements to their Stats and website overall so it definitely seems like a great option to check out! Keep up with the latest happenings on their blog here.

Pushwoosh Plans

Here’s a quick summary page of the options available through Pushwoosh currently:

Filed in: CordovaMobile DevelopmentPhoneGap Tags:

About the Author ()

Comments (24)

Trackback URL | Comments RSS Feed

  1. dam64 says:

    Thanks for this article but i don’t agree with “I noticed there also appears to be a plugin available and supported with PhoneGap Build”.

    This plugin is not yet supported by phonegap build.

  2. Dawson Loudon says:

    Not seeing pushwood listed on the supported plugins page:

    http://build.phonegap.com/docs/plugins

  3. dam64 says:

    I did not try because i read on that page https://build.phonegap.com/docs/plugins

    “Right now, you cannot submit your own plugins to PhoneGap Build and have them included on our system. We are working on the infrastructure changes to allow this support.”

    I think that the aim of the plugin that you linked is to be include in offical phonegap build plugins list.

    • Ok, I’ll try to track down the definite answer today. I know they are working on including popular plugins and push notifications was one of them but I’ll find out exactly where that stands. Thanks :)! Holly

      • dam64 says:

        Thanks for your answer :)
        Another solution (for ios) could be to get device token as we can get uuid at the moment. The push notification can easily be send with a WebService PHP side.

        Damien

        • Yes, that’s a good point. I actually touched on using node.js to send the notifications here in case that’s useful to anyone. There’s also a link in that post to a PHP API that could be helpful. Thanks for the feedback :)!! Holly

  4. Elie says:

    I am testing pushwoosh. I used their example for phonegap/android. It worked great. But to set Tags you need the token and I can’t find a way to retrieve the token. I saw your code for IOS Server-Side Code Handling-Listening for device registration token with Node.js. Can we fix it for Android? Any help will be appreciated.

  5. Netuddki says:

    PushWoosh is a nice service and they have the advantage that they can send to iOS and Android, however they give you only 1 million devices for free.

    I have 3 apps which have way more users over 1 million. If I want to send messages to all my users, I have to pay.

    I use http://pushwizard.com which gives you unlimited devices for free. It suits my needs way better than PushWoosh.

    They are new on the market and only for iOS, but very nice and helpful people. They say they are already working on the android integration too.

  6. Ajar says:

    Hi everyone
    For those of you coming back to this blog hoping to get some flash love
    If you feel like writing your apps & games for the mobile in Flash/Flex AS3, you can find a whole market of native extensions, among them also native push notifications:
    http://www.scoop.it/t/flash-interactive/p/1423876452/tools-milkman-games

    http://www.scoop.it/t/flash-interactive/p/1454838169/community-of-native-extensions-for-adobe-airnative-extensions-for-adobe-air

    enjoy
    Ajar
    :)

  7. qamooos says:

    Hello , Great article .

    can i add evenet handler inside my application when push notification occured??

    such as invoke function inside my application when push notification occured??

  8. Lucas says:

    Do you know if push notifications arrive if the app has never been opened or if it is closed?

    I know that’s the basic premise of push notifications, but it doesn’t seem logical given the code that controls interaction with pushwoosh is inside an embedded web view that isn’t running.

  9. Daniele says:

    Hello,
    I’ve integrated pushwoosh sdk to send push notifications on Android with PhoneGap.
    I can receive notifications on my device but there is no sound, no vibration and no wake lock. How I wrong?

  10. Andrew Ames says:

    When are they going to sort pushwoosh on phonegap build?!? surely this should be a priority this functionality is massive!

  11. Just a general note on this for all… Regarding PhoneGap Build, the support for the PushWoosh plugin will be coming at some point, but I do not have specific dates yet. I do know that the general push notifications plugin will be supported though in PhoneGap Build sometime next week! I will blog it as soon as it’s announced.

  12. Jacques says:

    Hello ….

    I followed this article and several others after this one with no success. Push Notifications simply does not work in all instances for me. I found some docs that claim that it is due to the Wild Card in provisioning, so I changed everything as per the article here: https://mixpanel.com/docs/people-analytics/configuring-an-ios-app-for-push-notifications

    Still getting the famous error: Error Domain=NSCocoaErrorDomainCode=3000

    Do you have any tips on how I can solve this?

    I am using Cordova 2.2.0 with XCode for iOs.

    Thanks.

  13. Arvind Awasthi says:

    Hi i am very much new on phone gap and my requirement is to implement push notification with phonegap.I had done same as you mentioned but when i checked my log it showing something like this.

    02-02 17:26:03.354: D/PushNotifications(16264): Plugin Called
    02-02 17:26:03.494: V/GCMRegistrar(16264): Is registered on server: false
    02-02 17:26:03.494: D/GCMRegistrar(16264): resetting backoff for com.test.again
    02-02 17:26:03.504: V/GCMRegistrar(16264): Registering app com.test.again of senders XXXXXXX

  14. Casey Wise says:

    Holly, I attended your iOS webinar last friday, thanks again for that. There’s a malformed link in this post, check out “”… or you can also visit my Push Notifications for iOS post.”

    Thanks again for your evangelism!