Ionic PWA 从 config.xml 获取版本号 [英] Ionic PWA get version number from config.xml
问题描述
我想在 Ionic PWA 中显示来自 config.xml 的版本号.
I want to show the version number from config.xml in an Ionic PWA.
使用 ionic 原生应用版本插件很容易为 ios/android 构建完成.
It is easy to get it done for ios/android builds using ionic native app version plugin.
但是什么是 PWA 构建的好方法(npm run build --release --prod)?
But what is a good approach for a PWA build (npm run build --release --prod)?
推荐答案
好的，如果 cordova-plugin-app-version 在 PWA 上不可用，访问 config.xml 文件的另一种方法是使用 grunt 任务将版本复制到您的模板(如您所知，在 Ionic 上，config.xml 文件未放置在可服务"位置，因此无法从 config.xml 读取执行时间的版本).
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).
例如，如果我们在 package.json 中控制应用版本，我们可以配置一个 grunt 任务，将版本复制到 config.xml 和 src/index.html.
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.
在package.json上设置应用版本.
{
"name": "my-app",
"version": "1.0.7",
...
在您的项目上安装 grunt.
$> npm install grunt --save-dev
$> npm install grunt-string-replace --save-dev
在 config.xml 和 index.html 上设置版本，并在每次发布版本时创建替换版本号的 gruntfile.js.
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
<?xml version='1.0' encoding='utf-8'?>
<widget version="1.0.7" id="...
src/index.html
<head>
<meta charset="UTF-8">
<title>Ionic App</title>
<meta name="version" content="1.0.7">
...
gruntfile.js
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// replace version to config.xml
'string-replace': {
inline:{
files: {
'config.xml': 'config.xml',
},
options: {
replacements: [{
pattern: /widget version="([dD]*?)"/ig,
replacement: 'widget version="' + '<%= pkg.version %>"'
}]
}
}
},
// replace version to index.html
'string-replace': {
inline:{
files: {
'src/index.html': 'src/index.html',
},
options: {
replacements: [{
pattern: /name="version" content="([dD]*?)"/ig,
replacement: 'name="version" content="' + '<%= pkg.version %>"'
}]
}
}
},
});
grunt.loadNpmTasks('grunt-string-replace');
// Default task(s).
grunt.registerTask('default', ['string-replace']);
};
使用 Meta 组件，如果插件不可用，则从 index.html 中读取版本.
Using Meta component, read version from index.html if plugins are not available.
import { AppVersion } from '@ionic-native/app-version';
import { Platform } from 'ionic-angular';
import { Meta } from '@angular/platform-browser';
...
@IonicPage({
name: 'main'
})
@Component({
selector: 'page-main',
templateUrl: 'main.html',
})
export class MainPage {
protected versionNumber: string;
constructor(private app: AppVersion, private meta: Meta) {
if (this.platform.is('cordova')) {
this.appVersion.getVersionNumber().then(
(v) => { this.versionNumber = v;},
(err) => {
// PWA
const viewport = this.meta.getTag('name=version');
this.versionNumber = viewport.content;
}
);
}else{
// Debug
const viewport = this.meta.getTag('name=version');
this.versionNumber = viewport.content;
}
}
...
在您的 html 模板上打印应用版本号.
Print the app version number on your html template.
<div class="app-version" text-center>version {{ versionNumber }}</div>
这篇关于Ionic PWA 从 config.xml 获取版本号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
