I want to show the version number from config.xml in an Ionic PWA.
It is easy to get it done for ios/android builds using ionic native app version plugin.
But what is a good approach for a PWA build (npm run build --release --prod)?
I want to show the version number from config.xml in an Ionic PWA.
It is easy to get it done for ios/android builds using ionic native app version plugin.
But what is a good approach for a PWA build (npm run build --release --prod)?
Ok, so if cordova-plugin-app-version is not available on PWA, an alternative way to access to config.xml file is using a grunt task that copy the version to your templates (As you know, on Ionic the config.xml file is not placed on a "servable" location, so there is no way to read the version on execution time from config.xml).
For example, if we control the app version in package.json, we can config a grunt task that copy the version both to config.xml and src/index.html.
On package.json set the app version.
Install grunt on your project.
Set version on config.xml and index.html, and create the gruntfile.js that replace the version number each time you release a version.
Config.xml
src/index.html
gruntfile.js
Using Meta component, read version from index.html if plugins are not available.
Print the app version number on your html template.
Using https://github.com/whiteoctober/cordova-plugin-app-version you can access your config.xml version, from your controller or template.
Using Ionic 4, add the Cordova plugin and Ionic Native wrapper:
And add AppVersion as a provider inside of your page main.ts
Then on your .html template main.html you can print the app version number:
Also (read official doc), you can access to appName, appPackageName, appVersionCode and appVersionNumber.
Found proper way to do all that with using custom webpack configuration and webpack.DefinePlugin. It's working everywhere, during
ionic serve
as well (as I needed because I send that to API), and not only on real devices as cordova-plugin-app-version. Only place where it's not working is when you doionic serve --devapp
(issue in @ionic/angular-toolkit)Everything below is for Ionic 4 (Angular 7):
yarn add @angular-builders/custom-webpack@7 @angular-builders/dev-server@7 --dev
[WEBPACK] custom.webpack.config.js is loaded
in terminal when running the app.console.log('APP_VERSION', APP_VERSION);
. With that you can inject other variables like that which known only during build time or adding other custom Webpack plugins.