Push Notifications Sample App with Ionic and ngCordova

December 16, 2014By 9 Comments

app-iconI created a new sample push notification app recently to highlight some new changes in iOS 8 and show an example of implementing them with a currently popular stack of frameworks available to build hybrid mobile apps quickly. The sample app is built using Ionic with ngCordova to take advantage of the Cordova PushPlugin wrapper (in addition to a few others noted on the GitHub Readme) and currently works on iOS (including iOS8) and Android. If you’re not familiar with ngCordova and building PhoneGap/Cordova apps with AngularJS, I can’t recommend it enough. It’s basically wrappers for common Cordova plugins that dramatically simplify your code and keep it more testable, maintainable and efficient. There’s already a huge list of common plugins supported with more being added all the time.

The app is nothing fancy, it simply registers your device when it runs and displays the device token returned from either APNs (Apple Push Notification Service for iOS) or GCM (Google Cloud Messaging for Android). Then when a notification is received, the app will display it in a list. The code handling is the more useful piece since it varies between platform and state (running in foreground, background, coldstart etc).

push-server_Fotor_Collage

What you can learn

In general this sample can be useful to see how to:

  • Add push notification support to your Ionic/Cordova app and take advantage of ngCordova to keep your angular code clean and maintainable.
  • Handle push notifications for different platforms and situations (iOS vs Android and if the app is running in the foreground, background or closed etc).
  • Create your own server-side solution for storing tokens and sending notifications using some nodeJS libraries available.

What to be aware of

The details for the app can be found in the readme on the GitHub project page and I provided comments in the code to help explain things in more detail, however there are a few other details I’d like to point out:

  • Register Handling – The registration id is returned in a different manner for iOS and Android when using the PushPlugin and it may be confusing at first. Just be aware that the iOS registration id (aka device token) is returned as a response to the PushPlugin register() call, whereas the Android registration id is received in the pushNotificationReceived() handler. See the controller.js code for details.
  • Unregister Handling – Currently the PushPlugin unregister() is not called in the code (commented out), for various reasons. Instead it’s calling to remove the device token from the 3rd party database. This may not be ultimate in production, but you should stop to read these links I’ve included for details on what is recommended:

Message Payload Details

A payload is the message (notification) that is sent thru the respective Cloud Service (APN/GCM) to the device where the app is registered. It contains custom data and settings and varies between OS. My sample app handles many different scenarios depending on what data and flags are found within the message payload that you should take a look at.

For instance, a typical sample message that might be received in your app is shown below in JSON format:

iOS Message Example

[{"badge":"0","sound":"soundName","alert":"Jennifer L liked your photo","foreground":"0"}]

Android Message Example

[{"message":"Tori432 commented on your photo: Awesome!","payload":{"message":"Tori432 commented on your photo: Awesome!"},"collapse_key":"optional","from":"824841663931","foreground":false,"event":"message","coldstart":false}]

The Cordova PushPlugin appends certain flags to the message data received, such as foreground and coldstart based on the current state and particular to platform. See the plugin readme for specific details on these.

Max Message Sizes

The sizes of message payloads is different between platforms and recently changed in iOS 8:

Newbies

If you’re new to push notifications you should go back and visit all of my previous posts which go into great detail about different aspects of supporting the on different platforms. Some of the links to those posts and other useful ones are also included in the GitHub Readme.

Filed in: AndroidioniciOSMobile DevelopmentPhoneGapPhoneGap 3.0

About the Author ()

Comments (9)

Trackback URL | Comments RSS Feed

  1. chetan says:

    Hi Holly Schinsky,

    can you please help in implementing PushPlugin for blackberry 10,

    i had implemented but was not able to get notification,

    My device was successfully registered.

    any, help is truly appreciated.

    i had also add post in below url,

    http://devgirl.org/2013/07/17/tutorial-implement-push-notifications-in-your-phonegap-application/

    Chetan,

  2. Darren says:

    Hi Holly

    It looks like they have changed the broadcast event notification name in the latest ngCordova – from ‘pushNotificationReceived’ to ‘$cordovaPush:notificationReceived’. think they are standardising notification names.

    May be worth mentioning as I know lots use your examples and will get caught out.

    Cheers
    Darren

  3. Paresh Gami says:

    Superb and very crystal clear explanation.!

    Thank you very much :)

  4. Chris says:

    The registration works fine for IOS, but for Android I get the error “No value for ecb”. I have seen in other implementation that the ecb field should be passed with the Android config together with the senderID. How can you make it work without specifying the ecb field? I have tried specifying the handleAndroid function in the ecb field without luck. Thanks for any help!

  5. Art says:

    Hello) I’m followed for your instruction

    Running command: /Users/argonix/Desktop/test/hooks/after_plugin_add/010_register_plugin.js /Users/argonix/Desktop/test
    module.js:338
    throw err;
    ^
    Error: Cannot find module ‘../../package.json’
    at Function.Module._resolveFilename (module.js:336:15)
    at Function.Module._load (module.js:278:25)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object. (/Users/argonix/Desktop/test/hooks/after_plugin_add/010_register_plugin.js:7:19)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Function.Module.runMain (module.js:501:10)
    Error: Hook failed with error code 1: /Users/argonix/Desktop/test/hooks/after_plugin_add/010_register_plugin.js
    at /usr/local/lib/node_modules/cordova/node_modules/cordova-lib/src/hooks/HooksRunner.js:194:23
    at _rejected (/usr/local/lib/node_modules/cordova/node_modules/q/q.js:797:24)
    at /usr/local/lib/node_modules/cordova/node_modules/q/q.js:823:30
    at Promise.when (/usr/local/lib/node_modules/cordova/node_modules/q/q.js:1035:31)
    at Promise.promise.promiseDispatch (/usr/local/lib/node_modules/cordova/node_modules/q/q.js:741:41)
    at /usr/local/lib/node_modules/cordova/node_modules/q/q.js:557:44
    at flush (/usr/local/lib/node_modules/cordova/node_modules/q/q.js:108:17)
    at process._tickCallback (node.js:355:11)
    Can you help?

  6. mario says:

    Hi – I just could not make it work when the app is not running ( coldstart). I think the callback used in ecb is lost after the application closes and not getting registered again when app restarted. Has anyone made it work, any additional code required aside from samples found in readme? http://bit.ly/1ETs23U

    Thanks.

  7. adidamty says:

    hello,
    i am using pushPlugin and it’s working with Android. but when i get the message in android i did’nt get this in multiline or wrapped message. what is the problem ?

  8. ok, got it.. my mistake was that Holly’s code comments states this for GCM SenderID:

    // REPLACE THIS WITH YOURS FROM GCM CONSOLE – also in the project URL like: https://console.developers.google.com/project/434205989073

    but Google has started to implement pretty URLs for projects and they no longer use the project ID in the url but they use the project name instead. You can find the project id on the project page.

Leave a Reply