How do I get the version string I defined in the config.xml

Question

How do I find out, which version my Cordova app is? I need that information to display it in an About screen.

Is it possible to read the config.xml and get the version string, which i am already maintaining in this file?

<widget ... version="0.0.1" ...

I would like to have a solution where I do not have to maintain the app's version number in several places in the code. Also, I do not want a plugin for that purpose, because most plugins do not support Android, iOS and browser as platforms.

Or am I overlooking a core plugin attribute?

Or is there a solution where I maintain one file, which is no the config.xml, and the config.xml gets the version information from that file?

How are you implementing "display version info" in your app's about screen? Any hint is appreciated.

My Cordova version is:

>cordova -v
4.2.0

Answer 1

Here my compilation from different answers. I use it to update some parameters in Xcode project for plugins compilation.

You can see that I am getting here app id and name from config.xml

And you can add it to after_prepare hook:

<hook src="scripts/addBuildSettingsToXcode.js" type="after_prepare" />

#!/usr/bin/env node

let fs    = require('fs');
let xcode = require('xcode');
let path = require('path');
let et = require('elementtree');


module.exports = function (context) {
    //console.log(context);

    function addBuildPropertyToDebugAndRelease(prop, value) {
        console.log('Xcode Adding   ' + prop + '=' + value);
        myProj.addBuildProperty(prop, value, 'Debug');
        myProj.addBuildProperty(prop, value, 'Release');
    }

    function updateBuildPropertyToDebugAndRelease(prop, value) {
        console.log('Xcode Updating ' + prop + '=' + value );
        myProj.updateBuildProperty(prop, value, 'Debug');
        myProj.updateBuildProperty(prop, value, 'Release');
    }


    // Getting app id and name from config.xml
    let config_xml = path.join(context.opts.projectRoot, 'config.xml');
    let data = fs.readFileSync(config_xml).toString();
    let etree = et.parse(data);
    let appId = etree.getroot().attrib.id ;
    let appName = etree.getroot().find('name')['text'];

    // Building project path
    let projectPath = 'platforms/ios/' + appName + '.xcodeproj/project.pbxproj';

    // Opening Xcode project and parsing it
    myProj = xcode.project(projectPath);
    myProj = myProj.parseSync();

    // Common properties
    addBuildPropertyToDebugAndRelease('DEVELOPMENT_TEAM', 'CGXXXXXXX');
    addBuildPropertyToDebugAndRelease('CODE_SIGN_IDENTITY', '"Apple Development"');

    // Compilation properties
    addBuildPropertyToDebugAndRelease('ALWAYS_EMBED_SWIFT_STANDARD_LIBRARIES', 'YES');

    // Save project file
    fs.writeFileSync(projectPath, myProj.writeSync());

};

Answer 2

based on the other answers, i've created the following before_prepare hook which works best for me in cordova 9 / ionic 5.

it does not require any additional lib to parse the config xml as it gets the version by regex. it works in browser, iOS and android platform enviroment. also it does not work in ionic serve as cordova hooks are not exectued here.

#!/usr/bin/env node
// Add %%VERSION%% at any place to index.html file to be replaced by this script.

var fs = require('fs');
var path = require('path');

function fileStringReplace(filename, search, replace) {
    var content = fs.readFileSync(filename, 'utf8');
    content = content.replace(new RegExp(search, "g"), replace);
    
    fs.writeFileSync(filename, content, 'utf8');
}

module.exports = function(context) {
    var rawConfig = fs.readFileSync("config.xml", 'ascii');
    var match = /^<widget.+version="([\d\.]+)".+?>$/gm.exec(rawConfig);
    
    if(!match || match.length != 2)
        throw new Error("version parse failed");
    
    var version = match[1];

    fileStringReplace("www/index.html", "%%VERSION%%", version);
    console.log("replaced version to " + version);
}

add the following hook registration to config.xml:

<hook src="hooks/patch-indexhtml-version.js" type="before_prepare" />

index.html in action:

<html lang="de" data-appversion="%%VERSION%%">

now you can do something like this to obtain the version in your app:

document.documentElement.getAttribute("data-appversion");

Answer 3

I'm writing in December 2020. Now the simplest solution is to use the plugin cordova-plugin-app-version

Reads the version of your app from the target build settings [got from config.xml]

Install it

cordova plugin add cordova-plugin-app-version

Simply use something like this in your JS:

cordova.getAppVersion.getVersionNumber(function (version) {
  console.log('APP version is ' + version)
  $('.version').text(version)
})

In your html you may use this to insert the version wherever you'd like:

<span class="version"></span>

Answer 4

If you are not interested in using any third party plugin to achieve this, then I feel Cordova hooks is the way to go. You can come up with a before_build hook to read the version from config.xml file and make use of the same in app.

Fortunately, this hook is readily available for you in the following link where they are reading version from config.xml and injecting it as a dependency wherever required.

Suggest you to also have a look at the official documentation of cordova hooks for better understanding.

In fact, you can also try out reading version info from config.xml and directly put it in some placeholder that you can create in your index.html to display the version info. This can be done before cordova build using hooks which in turn uses windows batch file that does the file operations. You can checkout a working sample of cordova hook that uses batch file in my github page.

Answer 5

Based on the script that @Gandhi pointed to in his answer, I updated the script to make it work for me with the current cordova@8: I use it as "after_prepare" hook, not "before_build", as in the later case the changed file got overwritten again when cordova copied the stuff to the platform directory soon after the hook has been executed ...

The script uses xml2js, so be sure to exec npm i xml2js --save-dev to make xml2js available.

#!/usr/bin/env node

// taken from https://www.bram.us/2015/01/04/cordova-build-hook-script-for-displaying-build-version-in-your-app/
// see https://stackoverflow.com/a/42650842
// This plugin replaces text in a file with the app version from config.xml.

// be sure to exec `npm i xml2js --save-dev` to make xml2js available


var wwwFileToReplace = "js/config.js";

var fs = require('fs');
var path = require('path');
var xml2js = require('xml2js');

function loadConfigXMLDoc(filePath) {
    var json = "";
    try {
        var fileData = fs.readFileSync(filePath, 'ascii');
        var parser = new xml2js.Parser();
        parser.parseString(fileData.substring(0, fileData.length), function (err, result) {
                           //console.log("config.xml as JSON", JSON.stringify(result, null, 2));
                           json = result;
                           });
        console.log("File '" + filePath + "' was successfully read.");
        return json;
    } catch (ex) {
        console.log(ex)
    }
}

function replace_string_in_file(filename, to_replace, replace_with) {
    var data = fs.readFileSync(filename, 'utf8');

    var result = data.replace(new RegExp(to_replace, "g"), replace_with);
    fs.writeFileSync(filename, result, 'utf8');
    //console.log("replaced in ", filename, "(", to_replace, " -> ", replace_with);
    var data2 = fs.readFileSync(filename, 'utf8');
    console.log(data2);
}

module.exports = function(context) {

    // var rootdir = process.argv[2]; // old cordova version
    var rootdir = context.opts.projectRoot;
    console.log("projectRoot=", rootdir);

    var configXMLPath = "config.xml";
    var rawJSON = loadConfigXMLDoc(configXMLPath);
    var version = rawJSON.widget.$.version;
    console.log("Version:", version);

    // var currentBuildPlatforms = process.env.CORDOVA_PLATFORMS.split(","); // old cordova version
    var currentBuildPlatforms = context.opts.cordova.platforms;
    //console.log(JSON.stringify(context));
    console.log("Current build platforms: ", currentBuildPlatforms);

    if (rootdir) {
        currentBuildPlatforms.forEach(function(val, index, array) {
            var wwwPath = "";
            switch(val) {
                case "ios":
                    wwwPath = "platforms/ios/www/";
                    break;
                case "android":
                    wwwPath = "platforms/android/assets/www/";
                    break;
                default:
                    console.log("Unknown build platform: " + val);
            }
            var fullfilename = path.join(rootdir, wwwPath + wwwFileToReplace);
            if (fs.existsSync(fullfilename)) {
                replace_string_in_file(fullfilename, "%%VERSION%%", version);
                console.log("Replaced version in file: " + fullfilename);
            }
        });
    }

}

Include this hook in your config.xml:

<hook src="scripts/after_prepare_read_app_version.js" type="after_prepare" />

Answer 6

I would just do something like this:

cordova.getAppVersion.getVersionNumber().then(function (version) {
   if (!window.localStorage['version'] || window.localStorage['version'] <    version) {
       window.localStorage['version'] = version;
   }
});

That way you can call window.localStorage['version'] where ever you need it.

Answer 7

i use the plugin describe at https://github.com/whiteoctober/cordova-plugin-app-version 1 step : cordova plugin add https://github.com/whiteoctober/cordova-plugin-app-version.git

2 step (cut and paste) If you are using jQuery or AngularJS, promise style is supported. Use something like:

cordova.getAppVersion.getVersionNumber().then(function (version) {
    $('.version').text(version);
});

If not, pass a callback function:

cordova.getAppVersion.getVersionNumber(function (version) {

alert(version);
});

cheers