Push Notifications Sample App with Ionic and ngCordova

I 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).

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:
  
  
  
  • Apple Unregister Details
  
  
  • Android Unregister Details
  
  
  
  

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:

• iOS Max Payload Size – iOS8 payload size is 2 kilobytes, < iOS8 is 256 bytes


• Android max payload is 4 kilobytes .

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.

by Holly Schinsky via Devgirl's Weblog