Tips for implementing push notifications with ionic

By
Ryan Robinson

I was recently tasked with creating a mobile application to be released for both iOS and Android. As a PHP developer with no experience coding natively for either platform, I was pleased to discover a framework that would allow me to develop an app for both using HTML, JS, and CSS: Ionic.

Leveraging plugins from both Cordova and Phonegap, with built-in elegant CSS elements such as tabs, menus, card, and more, Ionic is a powerful tool set for a mobile-app newbie such as myself.

The real draw for me, however, was the built-in push service in the Ionic platform. After implementing push in your app, you can use Ionic.io to manage your device tokens and send push notifications very easily without having to interact with APNS or GCM directly. Very cool, but not without some headaches.

Be mindful of which push implementation you're using.

The current recommended implementation is to use the Phonegap push plugin, found here. There is a legacy push implementation from Ionic that used an older, deprecated version of this plugin that caused me some confusion. Make sure you are reading the current documentation and not the v1.0 or beta 2.0 docs.

You'll need two security profiles at ionic.io: One for development, and one for production.

Your Ionic security profiles are what contain your Apple Push Notification Service (APNS) certificates, and your Google Cloud Messaging (GCM) API key. You will use the same GCM key in both profiles since it works for both development and production, however, you’ll need separate certificates in APNS for dev and production.

Push notifications can be sent by an HTTP request from an outside server, or manually from inside Ionic’s platform. Whichever way you’re doing it, make sure you are targeting the correct security profile with your push.

Have more than one iOS device to test your production pushes with.

After getting development pushes working correctly in iOS, you’ll want to test production pushes. I ran into an issue in which devices that had recently registered a token and been sent a push using the development certificate would not receive production pushes. This led me to chase my tail thinking there was something wrong with my provisioning profile or APNS production certificate. After testing production on another iPhone that had never registered for or received a development push, it worked fine. Just a tip if you are running into this issue. This also leads me to:

Test your iOS production push notifications with an ad hoc provisioning profile

It can be a real pain to upload every build you want to test production pushes on to iTunes Connect, wait for processing, assign it to Test Flight and then download it. I discovered you can utilize your production push certificate by code signing with an Ad Hoc provisioning profile, and then installing to your device directly from XCode! There is a great answer on Stack Overflow describing this process here.

Conclusion

I found Ionic fairly easy to use and implement, and I would recommend it to anyone developing hybrid mobile apps in which a web-view style would work well. Implementing push notifications can be daunting, but I hope the tips outlined here can save you from some frustrations! Good luck!