Modify The Badge Number Of An Ionic Framework App

This tutorial will demonstrate creating badge indicators in your launcher icon for iOS and some versions of Android.

Nic Raboy

Jul. 13, 15 · Tutorial

Like (0)

Save

9.99K Views

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:

ionic start IonicProject blank
cd IonicProject
ionic platform add ios
ionic platform add android

Create New Ionic Project Shell 1 2 3 4 ionic start IonicProject blank cd IonicProject ionic platform add ios ionic platform add android

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:

cordova plugin add https://github.com/katzer/cordova-plugin-badge.git

Install Apache Cordova Badge Plugin Shell 1 cordova plugin add https : / / github .com / katzer / cordova - plugin - badge .git

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:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title></title>

        <link href="lib/ionic/css/ionic.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">

        <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
        <link href="css/ionic.app.css" rel="stylesheet">
        -->

        <!-- ionic/angularjs js -->
        <script src="lib/ionic/js/ionic.bundle.js"></script>

        <!-- cordova script (this will be a 404 during development) -->
        <script src="js/ng-cordova.min.js"></script>
        <script src="cordova.js"></script>

        <!-- your app's js -->
        <script src="js/app.js"></script>
    </head>
    <body ng-app="starter">
        <ion-pane>
            <ion-header-bar class="bar-stable">
                <h1 class="title">Ionic Blank Starter</h1>
            </ion-header-bar>
            <ion-content>
            </ion-content>
        </ion-pane>
    </body>
</html>

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:

angular.module('starter', ['ionic', 'ngCordova'])

.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
        if(window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if(window.StatusBar) {
            StatusBar.styleDefault();
        }
    });
})

.controller("ExampleController", function($scope, $ionicPlatform, $cordovaBadge) {

    $ionicPlatform.ready(function() {
        $cordovaBadge.promptForPermission();

        $scope.setBadge = function(value) {
            $cordovaBadge.hasPermission().then(function(result) {
                $cordovaBadge.set(value);
            }, function(error) {
                alert(error);
            });
        }
    });

});

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:

<ion-content ng-controller="ExampleController">
    <button class="button" ng-click="setBadge(5)">Set Badge</button>
</ion-content>

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.

Comments