Find The Application Version In Your Ionic Framework App

If you’re like me, you want your users to know which version of your mobile application they are using. Nothing like feeling several generations behind without even knowing it. There are other benefits to knowing your application version. For example, maybe you need to upgrade legacy data when people upgrade between versions of your application. You can’t assume your users will be upgrading from the latest version of your application.

Now you can always hard-code the application version throughout your application and hope you remember to change it upon a new release, or you can make use of the nifty Apache Cordova plugin from White October.

My current favorite Apache Cordova framework is Ionic, so we’ll be configuring based on that. However, it is not difficult to use this information with Phonegap.

Let’s start by creating a new Ionic Framework project with Android and iOS support:

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

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

Next we want to install the Apache Cordova plugin into our project. This can be done, but running the following from your command prompt:

cordova plugin add https://github.com/whiteoctober/cordova-plugin-app-version.git

There isn’t really too much to this plugin, so it won’t be difficult to use.

Open your app.js file and make it look something like the following:

var appVersion = "0.0.0";

var example = angular.module('starter', ['ionic'])
    .run(function($ionicPlatform) {
        $ionicPlatform.ready(function() {
            if(window.cordova && window.cordova.plugins.Keyboard) {
                cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
            }
            if(window.StatusBar) {
                StatusBar.styleDefault();
            }
            cordova.getAppVersion(function(version) {
                appVersion = version;
            });
        });
    });

In the above code, you can obtain the application version number found in your config.xml file.

There are a few things to note when using this plugin:

• You cannot test this plugin from a web browser. You must be using a device or simulator.
• The plugin must be called from within the $ionicPlatform.ready() or onDeviceReady() methods to work correctly. If you try to use it before the platform is ready you will get errors or strange results.

Nic Raboy

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