chr*_*002 4 webpack progressive-web-apps ionic3
我想在 Ionic PWA 中显示来自 config.xml 的版本号。
使用 ionic 本机应用程序版本插件可以轻松完成 ios/android 构建。
但是什么是 PWA 构建的好方法（npm run build --release --prod）？
好的，所以如果 PWA 上没有 cordova-plugin-app-version，访问 config.xml 文件的另一种方法是使用 grunt 任务将版本复制到模板中（如您所知，在 Ionic 上，config.xml文件未放置在“可服务”位置，因此无法在执行时从 config.xml 读取版本）。
例如，如果我们在 package.json 中控制应用程序版本，我们可以配置一个 grunt 任务，将版本同时复制到 config.xml 和 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。
配置文件
<?xml version='1.0' encoding='utf-8'?>
<widget version="1.0.7" id="...
源代码/索引.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="([\d\D]*?)"/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="([\d\D]*?)"/ig,
replacement: 'name="version" content="' + '<%= pkg.version %>"'
}]
}
}
},
});
grunt.loadNpmTasks('grunt-string-replace');
// Default task(s).
grunt.registerTask('default', ['string-replace']);
};
使用 Meta 组件，如果插件不可用，从 index.html 读取版本。
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 模板上打印应用程序版本号。
<div class="app-version" text-center>version {{ versionNumber }}</div>
| 归档时间： |
|
| 查看次数： |
3024 次 |
| 最近记录： |