Ionic Framework: How Sending Multiple Push Notifications Has Been Easier!

I am an experienced Web developer mostly working on Ruby on Rails, Mysql, Javascript, AngularJs. I was curious if this knowledge will be enough to help me in developing a native mobile app!

I Googled and found a few frameworks like Ionic, PhoneGap, Kendo UI, etc. that I could play around with. Using these frameworks, I assumed that I will become a “Mobile Developer”. But wait… using these frameworks will make one a Hybrid Mobile App Developer– which suits me just fine! 🙂 Of all the frameworks I was toying around with, I was impressed with Ionic because of good documentation and availability of lots of plugins.

After starting development in Ionic, everything was going smoothly until I hit the requirement to integrate Push notifications! I checked for an Ionic plugin for Push Notifications. I found phonegap-plugin-push which is well documented but has some glitches. I shall discuss these below to save others from the issues I faced.

Associating a page to a notification

Usually, on receiving a mobile notification, tapping on it should open the screen of  the relevant app. Though this is a basic need for any mobile app, the documentation for phonegap-plugin-push plugin did not mention anything about it. Even after spending a few hours reading through various posts and articles, I did not find any solution. I was quite surprised! Finally, I decided to resolve this myself. The web developer in me triggered a thought of trying it the AngularJS way because the requirement was similar to redirect to page.

Maybe, this is the way to do this in Ionic but I haven’t found any documentation on this. If you know of some better way, please educate everyone by commenting on this post. Nevertheless, I am putting down my way in this blog. Lets get started.

In the section below, I am going to explain how to setup push notifications and then how to open the respective page after clicking the Notification.

Installation

$ cordova plugin add phonegap-plugin-push --variable SENDER_ID="XXXXXXX"

• SENDER_ID is your Project Number in the Google Developer Console. Please check the installation step here.

After installation and configuring the SENDER_ID, we can use PushNotification.init()

Below is my app.js code added in $ionicPlatform.ready(). The method reads the deviceID and sends it to the server every time the application is launched. Now, the registered mobile is ready to received push notifications.

var push = PushNotification.init({
android: {
senderID: SENDER_ID,
forceShow: true
},
ios: {
alert: 'true';,
badge: 'true';,
sound: 'true';
},
windows: {}
});

push.on('registration', function(data) {
console.log(data.registrationId)
// you need to send this registrationId to server
// to store to send push notification and require
// for to generate ARN
// I am storing this Id in $rootScope and sending
// to server after login
});

push.on('error', function(e) {
console.log(e)
// e.message
})

In push.on(‘notification’, function(data) {}) , we open the relevant page on notification click.

push.on('notification', function(data) {
switch (data.count) {
case 'records':
$state.go('dashboard.index', {file: data.additionalData.file});
break;
case 'handouts':
$state.go('dashboard.records', {activeTabIndex: 1, file: data.additionalData.file});
break;
case 'vaccinations':
$state.go('dashboard.vaccines');
break;
default:
$state.go('dashboard.index');
}
});

On receiving the notification, push.on(‘notification’, callback) will be executed. In callback you get data parameters. Here  is list of callback parameters.

I am passing data.count value and using that value, we  open the required page.

In above example, check case 2 – I am passing extra parameter that opens the relevant.

Sending Multiple Push Notification Simultaneously On Mobile

In one more scenario, I had to simultaneously send more than one push notification to user. This adds a little more complexity if the user has installed the app on more than one device (mobiles).

The problem is that if more than 1 notification is generated by the server at the same time, then notifications randomly get dropped (Basically not all were delivered to the mobile).

The solution is to pass the data.notId parameter in the values as an integer and for each notification and  it should always be incremented 😉

This may seem trivial for seasoned Ionic developers, but for a newbie it could be a nightmare.

Hope this blog may help to save few hours.