Modify The Badge Number Of An Ionic Framework App

Previously I did a post on Simon Reimler’s blog regarding local notifications with Ionic Framework.  However, there is a different kind of notification you can use in your application.  In iOS and many different flavors of Android (not all), you have the opportunity to use badge indicators on your launcher icon.  Although this doesn’t notify users with a prompt, it will still notify them on their home screen that something needs their attention.

There is a nifty Apache Cordova plugin created by Sebastián Katzer called cordova-plugin-badge that will allow us to easily add this functionality to our Ionic Framework mobile applications.

Before reading too far into this, if you’re an Android developer, note that not all Android flavors support badges.  Don’t let this concept drive the functionality of your Android application.

Let’s start by creating a new Ionic Framework Android and iOS project via the Terminal or Command Prompt:

As always, be aware that if you are not using a Mac, you won’t be able to add and build for the iOS platform.

The next step would be installing the badge plugin for Apache Cordova.  With the Ionic project as your current working directory in your Terminal or Command Prompt, run the following:

This will allow you to now use raw JavaScript to add badge counts to your launcher icons.  However, because we’re using Ionic Framework which is built on AngularJS, it would only make sense to install the AngularJS extension set, ngCordova, to make our development process a bit simpler.

Because ngCordova changes frequently, I’m going to reference that I’m using the version from commit c3634c on GitHub.  You’re welcome to be adventurous and use the latest version, but just note it might not work anymore with this tutorial.

Copy ng-cordova.min.js into your project’s www/js directory, then crack open your www/index.html file to include it in your code like so:

Notice that I’ve included ng-cordova.min.js above cordova.js.  This is important because if you don’t do that things may not work.

The next thing we want to do is open the www/js/app.js file and add some logic for setting the badge count:

Notice in our ExampleController that we’re wrapping everything in the $ionicPlatform.ready() method.  This is because the plugin uses native code which must be ready before we try to use it.

When the plugin is ready, we first need to ask the user for permission.  Whether or not the user accepts or declines, the only way to change this decision is to do so via the device settings.

The setBadge method that comes next is called from the www/index.html file.  Swap out the <ion-content> tags for something like this:

Now when the device has permission, if you click the button, it will assign a badge number of five to the launcher icon.

Conclusion

Badge numbers are an alternate way to notify users that something needs their attention.  Adding them to your iOS and Android (some) apps through Ionic Framework is not complicated with the Apache Cordova plugin.

A video version of this article can be seen below.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in Java, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Apache Cordova. Nic writes about his development experiences related to making web and mobile development easier to understand.

  • sebastian correa

    hi nic. im trying this tutorial on android and cant make it work, i cant see the badge on the ionic icon, im watching sometinhg like a local notification. but nothing else.

    also the promptForPermission mehtod is deprecated, use registerPermission

    // return cordova.plugins.notification.badge.promptForPermission();

    • As I mentioned numerous times in the video and in this article, not all Android operating systems support badges. For example my Nexus 5 with vanilla Android does not. You’re going to get best results using this if you go in with the mentality that it is only going to work with iOS. If it happens to work on a users Android device as well, then it is a win. In the end, it is up to the Android operating system as to whether or not this is going to work and ultimately out of our control.

      Yes promptForPermission is deprecated, but ngCordova has not received an update. The command however does still work fine.

      Regards,

    • valmy roi

      This solutions saved me

  • Hi Nic, just finished the local notification tutorial thanks for that one. Now I ran into a bit of trouble with XCode when I install this plugin, it says:

    ld: 1 duplicate symbol for architecture arm64
    clang: error: linker command failed with exit code 1 (use -v to see invocation)

    I’ve got the local notification plugin as well. Found a similar issue at github but couldn’t understand the fix so have you ran into this before?

    • I’ve not run into this before. If conflicts are coming up, you might open an issue ticket for the plugin developer.

      Sorry,

    • Hi Jose,
      I have run into a similar issue, and it is not related to this plugin. What I had to do was make an entirely new project and reinstall the plugins and move the WWW folder into it.

  • John Read

    Thanks for sharing this useful information publicly. This tutorial will definitely helps the android developers.
    mobile phone application development company

  • mariashally

    Android apps is used to develop the technology very well .It is use for create apps, games and large no of apps in electronic devices. uses in tablets, HIFI phones in order to access creating applications, games, and large number of applications in electronic devices. Android not only comprise operating system but also key applications and middleware. It is maintained and developed by open source project. Android applications create life more comfortable for the end users. The applications are written in java programs and it has services such as process management, memory management, network stack, security. The latest version android is LOLLIPOP 5.0.

    see more at:http://www.androidtraining-chennai.in/android-training-chennai.html

  • Tae Hwa Kim

    Hello. Nic Thank you for the nice post.

    I have question about ‘Increasing badge number on notification’

    In the beginning, I followed below link

    http://docs.ionic.io/docs/push-from-scratch

    The push notification is working ( Tested Android 4.4.2 ), But unfortunately I couldn’t find way to increase badge number when app is background which means turned off.

    After, I found out your youtube video and got hope.
    However, I can not still find the way.
    Do you have any advice?

    Thank you.

    • I’m not familiar with Ionic push notifications. Sorry

    • Tuan Anh Vuong

      Hi Tae Hwa Kim,
      Now I am facing the same problem. Did you resolve it? Can you give me a solution?
      Thanks!

  • Marcos Arata

    This plugin only works if the app is open? Is it possible to send a push to update the badge counter?

    • Yes of course you can. Just make sure the user has accepted permission first at first launch.