Monitor Device Battery Status Using Ionic Framework

So you’re making a mobile app using Ionic Framework and you care about the experience your users receive?  Maybe you want to control the functionality of certain features based on how much battery the users device has left.

An example of this is, maybe you have your application pulling remote data while the application is open.  Maybe you’ve decided that if your users battery is less than 30% you want the user to have to pull-to-refresh in order to preserve battery life.

This kind of battery monitoring can be performed through the cordova-plugin-battery-status plugin by Apache Cordova.

Let’s go through using this plugin by first creating a fresh Ionic Framework project via your Terminal or Command Prompt:

Remember, if you’re not using a Mac, you cannot add and build for the iOS platform.

With the project as your current working Command Prompt or Terminal directory, enter the following in order to install the battery status plugin:

We aren’t going to use the plugin in its raw JavaScript form.  Instead we’re going to use the AngularJS extension set, ngCordova, to make things a little more Ionic Framework friendly.

The ngCordova library changes frequently, so for this tutorial, we’re going to use commit c3634c64 from GitHub.  Feel free to be adventurous and use the latest, but don’t be too surprised if this tutorial doesn’t work with it.

After downloading ngCordova, place the ng-cordova.min.js file in your project’s www/js directory and add it to your www/index.html file like so:

Notice that I’ve placed ng-cordova.min.js above cordova.js.  This is important because if you don’t, you’re going to get strange results.

Also take note of ng-controller="ExampleController" found in the <ion-content> tags.  We’re going to create that controller now.

Open your project’s www/js/app.js file and make it look like the following:

On the first line we’ve injected ngCordova into our module and on lines 14-26 we’ve created our controller code.  Because we’re using a plugin that makes use of native device code, we need to wrap it in an $ionicPlatform.ready function.  You can use onDeviceReady if you’d prefer as well.  This will tell your code to wait until the Apache Cordova plugins are ready before trying to use them.

The ngCordova plugin broadcasts information regarding the battery on three channels:

  1. $cordovaBatteryStatus:status
  2. $cordovaBatteryStatus:critical
  3. $cordovaBatteryStatus:low

In the above code, we’re only listening on the status channel.  Every time the battery percent changes by at least one, it will be called and display an alert.


Monitoring device battery life can have many advantages in your mobile application and can easily drive a better user experience.  Using the battery status plugin in your Ionic application could bring good things with minimal effort.

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.

  • CesarP

    I’m assuming the “serve” command wont work since is only web based, but the ‘ionic viewer’ will show results in the phone?

    • Don’t use ionic serve, ionic view, ionic live-reload, or phonegap build when you have native plugins in your app.