DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports
Events Video Library
Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
View Events Video Library
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
  1. DZone
  2. Coding
  3. Frameworks
  4. Modify The Badge Number Of An Ionic Framework App
Content provided by Couchbase logo

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 user avatar by
Nic Raboy
·
Jul. 13, 15 · Tutorial
Like (0)
Save
Tweet
Share
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

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends: