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:

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:

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:

In the above code, notice the highlighted lines.  With those four lines of 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 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.

  • Wysie

    This is great, thanks! One question though, the call for the version number seems to be fired asynchronously, so if there’s another line of code comparing version numbers right after that, chances are it will still have the old value 0.0.0. How can we make this synchronous?

    Thanks!

    • Hi Wysie,

      I’m not sure it is possible to make an asynchronous function synchronous in AngularJS. I could be wrong though.

      Why not compare your code version numbers inside the success callback? This way comparisons won’t happen until the promise has returned. Do you have an example of what you’re trying to accomplish?

      Regards,

  • Jaap van der Kreeft

    Good article. On extension. If it runs on the web an error occures that cordova is not available. This can caught by:

    if (window.cordova) {
    cordova.getAppVersion(function(version) {
    appVersion = version
    });
    }

    • Yep that is correct. Thanks for sharing!

  • Hello Nic. Perhaps off topic here, but are you aware of how to deal with a Paid an Free version in an Ionic setting? So if I have a variable NB_IMAGES_LIMIT, which is 15 in the free version and 99999 in the paid version, how do I check for whether I paid for the app or not, and thus assign the correct variable?

  • Hi I don’t if i`m in the right place but i want my IONIC app to be targeted for android-19 and not android-22. do you know where to change that?

    Also could you make a post explaining a bit more about ionic, cordova and android versions?

    • Not entirely the right place, but I think it is on topic enough to stay :-).

      I don’t recommend you change the target. In fact, more than likely it will automatically be changed by any plugins that you install. The targeted versions are ones that work the best.

      As for the Ionic vs Cordova vs Android versions. All three are separate products by different people so as they make revisions to their software the independent versions will change. As Ionic makes improvements to their framework they will change the version. As Cordova makes improvements on how it functions on the devices it will change versions. Likewise with Android. I wouldn’t be too concerned with them. Just keep up with the release logs for each.

      Hopefully that helps.

  • ykarthik reddy

    Hi Nic, Actually I need to popup a msg to update the app when the new version is release.. From this plugin ill get the version of current app.. but how to get the version of the app from playstore..

    • I don’t believe any APIs like this have been made public by Google or Apple. Your best bet would be to keep track of the versions yourself via a website and have your application request the latest version number from your website. If the two versions local and remote do not match, then open the app store.

      Regards,

      • ykarthik reddy

        Thnku Nic

    • Mark Aurit

      I do this very thing in a slightly different way. I keep the app’s version in a constant in the app module. I put the playstore’s version of the app in the data store the app uses. Similar to what you want to do with the popup, I have an about page that lists (among other things) the two, highlighting the app’s version in red if it is older.

      • Thanks for sharing 🙂

      • ykarthik reddy

        Thankyou Mark.. I’ll try that.

  • shri vignesh

    Uncaught TypeError: cordova.getAppVersion is not a function

    I am facing this issue. How can i solve this issue?