Setting Up Mobile Badges: Two Methods
We all know those badges on mobile applications, the ones that show a number on application icons and, for many, cause anxiety. If you are like me and get lots of emails, you have seen 300+ of them from time to time.
But what many don’t know is how those badges get their numbers. While these badge counts are usually associated with the push notifications sent to the application, the push notifications don’t always actually create the badge or their number. In these cases, the application must always be running so it can expect the push notifications and then display the number. But this can be an unrealistic expectation, especially as users have grown to expect (and depend on) these badges.
So how do you make those little badges display for your mobile applications? There are two ways to go about this.
Option 1 – The Manual Way
This option handles the push notifications from within your application and manually applies the badge to it. If you are writing an Ionic application, you will need to add the badge plugin.
ionic cordova plugin add cordova-plugin-badge npm install @ionic-native/badge
After you have the plugin installed, incrementing a badge counter is really easy.
The problem with this approach is – as I said above – that it requires the application to be running all the time. Otherwise, it might not receive the notification and display the badge. If your application is running, it will get the update and everything will be fine. So, before you go down this road, you need to ask yourself how likely is it that your application will be running all the time. I think you’ll find that the answer is “not very likely.”
Option 2 – Send the Badge Count with the Push Notification
This option involves sending the badge count from the server that also sends the push notification. Remember how I said that the application needs to be running in order to display an accurate badge number? This option gets around that requirement. But this also means that you must maintain the badge count on the server. In the JSON below, we pass a “3” for the badge count. That would cause a “3” to show in the badge as shown on the application.
The Caveats
As with everything, there are always exceptions and gotchas to keep in mind. Here are two big ones.
The first is that users can disable the display of badges; don’t expect your users to always have them and don’t build essential functionality around them. Treat it as a nice optional feature.
The second is the difference between iOS and Android. On iOS, how badges work is pretty standard, but Android badges behave differently based on which launcher is configured on a user’s phone. On Android, the Microsoft launcher seems to handle badges really well, while the Samsung launcher seems to exhibit some odd behavior.
If you have any questions or comments, hit me up on Twitter or sound off in the comments below.
