Question

我想在Ionic PWA中显示config.xml中的版本号。

使用离子本机应用程序版本插件很容易为ios / android构建完成。

但PWA构建的好方法是什么（npm run build --release --prod）？

Answer 1

好的，所以如果PWA上没有cordova-plugin-app-version，访问config.xml文件的另一种方法是使用将版本复制到模板的grunt任务（如你所知，在Ionic上config.xml文件没有放在＆＃34; servable＆＃34;位置，因此无法从config.xml读取执行时的版本。）

例如，如果我们控制package.json中的app版本，我们可以配置一个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。

<强>的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="([\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>

Answer 2

我认为@pablo.nunez提供了正确的解决方案，但对我来说，我必须对Gruntfile.js进行少量修改，以同时成功更改index.html和config.xml文件。

这是我修改后的Gruntfile.js：

module.exports = function(grunt) {
  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    // replace version to config.xml and index.html in the same action
    'string-replace': {
      inline: {
        files: {
          'config.xml': 'config.xml',
          'src/index.html': 'src/index.html'
        },
        options: {
          replacements: [
            {
              pattern: /widget id="([\d\D]*?)" version="([\d\D]*?)"/gi,
              replacement: 'widget id=' + '"$1"' + ' version="' + '<%= pkg.version %>"'
            },
            {
              pattern: /name="version" content="([\d\D]*?)"/gi,
              replacement: 'name="version" content="' + '<%= pkg.version %>"'
            }
          ]
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-string-replace');

  // Default task(s).
  grunt.registerTask('default', ['string-replace']);
};

我还整合了一个事实，在IONIC 4（Angular）项目中，项目ID在config.xml文件中的版本号之前被自动替换。

Answer 3

一种简便的方法，对于仅在离子4中具有PWA的人

1。 src / index.html

  <head>
  <meta charset="utf-8"/>
  <title>title App</title>
  <meta name="version" content="0.0.1">
  ....

2。 page.ts

  ...
  ionViewWillEnter() {
    console.log('ionViewWillEnter');
    const aux: any = document.getElementsByTagName('META');
    // tslint:disable-next-line:prefer-for-of
    for (let i = 0; i < aux.length; i++) {
     if (aux[i].name === 'version') {
       this.versionNumber = aux[i].content;
      }
    }
  }
  ....

3。 page.html

  ....
  <div *ngIf="versionNumber">
    <ion-text color="dark">
      <p>{{versionNumber}}</p>
    </ion-text>
  </div>
  ....

Answer 4

使用https://github.com/whiteoctober/cordova-plugin-app-version，您可以从控制器或模板访问config.xml版本。

使用Ionic 4，添加Cordova插件和Ionic Native包装器：

$ ionic cordova plugin add cordova-plugin-app-version
$ npm install @ionic-native/app-version

在页面main.ts中添加AppVersion作为提供者

import { AppVersion } from '@ionic-native/app-version';
import { Platform } from 'ionic-angular';
...
@IonicPage({
  name: 'main'
})
@Component({
  selector: 'page-main',
  templateUrl: 'main.html',
})
export class MainPage {
   protected versionNumber: string;
   constructor(private app: AppVersion) {
      if (this.platform.is('cordova')) {
         this.appVersion.getVersionNumber().then(
            (v) => { this.versionNumber = v;}
         );
      }else{
         this.versionNumber = '???';
      }
   }
   ...

然后在您的.html模板main.html上，您可以打印应用版本号：

<div  class="app-version" text-center>version {{ versionNumber }}</div>

另外（阅读官方文档），您可以访问appName，appPackageName，appVersionCode和appVersionNumber。

Answer 5

找到了使用自定义webpack配置和webpack.DefinePlugin进行操作的正确方法。它也可以在ionic serve的任何地方工作（这是我需要的，因为我将其发送到API），并且不仅在cordova-plugin-app-version的真实设备上运行。当您ionic serve --devapp（issue in @ionic/angular-toolkit）

时，唯一无法正常工作的地方就是

以下所有内容适用于Ionic 4（角度7）：

使用yarn add @angular-builders/custom-webpack@7 @angular-builders/dev-server@7 --dev添加@ angular-builders / custom-webpack @ 7 @ angular-builders / dev-server @ 7开发包
需要用新的替换angular.json中的architect.build和architect.serve建设者：

...
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./custom.webpack.config.js"
            },
...

...
        "serve": {
          "builder": "@angular-builders/dev-server:generic",
          "options": {
            "browserTarget": "app:build"
          },
...

使用下一个内容创建custom.webpack.config.js：

const webpack = require('webpack');
console.log('[WEBPACK] custom.webpack.config.js is loaded');

function getAppVersion() {
  const fs = require('fs');
  const DOMParser = require('xmldom').DOMParser;

  const content = fs.readFileSync('./config.xml').toString('utf-8');
  const config = new DOMParser().parseFromString(content, 'text/xml');
  return config.getElementsByTagName('widget')[0].getAttribute('version');
}


module.exports = (config, options) => {
  config.plugins.push(
    new webpack.DefinePlugin({
      'APP_VERSION': JSON.stringify(getAppVersion()),
    }),
  );

  return config;
};

如果所有操作均正确完成，则在运行应用程序时，您会在终端中看到[WEBPACK] custom.webpack.config.js is loaded。
现在将注入全局变量APP_VERSION，并且应在应用程序的任何位置可用。 console.log('APP_VERSION', APP_VERSION);。这样，您可以注入其他变量，例如仅在构建时才知道的变量或添加其他自定义Webpack插件。
接下来，您可能需要将TypeScript的APP_VERSION定义添加到您的custom-typings.d.ts中。

// Variables injected by webpack DefinePlugin
declare const APP_VERSION: string;

Answer 6

我创建了一个 npm 模块，它为您的 Ionic 项目生成一个 buildInfo.ts 文件 - 然后您可以导入该文件并获取构建号和构建日期。您可以在此处找到该模块：https://www.npmjs.com/package/ionic-build-info。

Ionic PWA从config.xml获取版本号

6 个答案: