ionic2/3实战-添加app升级功能

效果演示

插件准备

1.File
2.Transfer
3.File Opener
4.App Version
5.In App Browser

上代码

• app.component.ts调用检查是否升级方法

  
  
  

• NativeService.ts下载安装app方法

  
  
  

  /**
 * Created by [email protected] on 12-27.
 */
import {Injectable} from '@angular/core';
import {Platform, AlertController} from 'ionic-angular';
import {AppVersion} from '@ionic-native/app-version';
import {File} from '@ionic-native/file';
import {Transfer, TransferObject} from '@ionic-native/transfer';
import {FileOpener} from '@ionic-native/file-opener';
import {InAppBrowser} from '@ionic-native/in-app-browser';
import {APP_DOWNLOAD, APK_DOWNLOAD} from "./Constants";

@Injectable()
export class NativeService {

  constructor(private platform: Platform,
              private alertCtrl: AlertController,
              private transfer: Transfer,
              private appVersion: AppVersion,
              private file: File,
              private fileOpener: FileOpener,
              private inAppBrowser: InAppBrowser) {
  }


  /**
   * 检查app是否需要升级
   */
  detectionUpgrade() {
    //这里连接后台获取app最新版本号,然后与当前app版本号(this.getVersionNumber())对比
    //版本号不一样就需要申请,不需要升级就return
    this.alertCtrl.create({
      title: '升级',
      subTitle: '发现新版本,是否立即升级？',
      buttons: [{text: '取消'},
        {
          text: '确定',
          handler: () => {
            this.downloadApp();
          }
        }
      ]
    }).present();
  }

  /**
   * 下载安装app
   */
  downloadApp() {
    if (this.isAndroid()) {
      let alert = this.alertCtrl.create({
        title: '下载进度：0%',
        enableBackdropDismiss: false,
        buttons: ['后台下载']
      });
      alert.present();

      const fileTransfer: TransferObject = this.transfer.create();
      const apk = this.file.externalRootDirectory + 'android.apk'; //apk保存的目录

      fileTransfer.download(APK_DOWNLOAD, apk).then(() => {
       this.fileOpener.open(apk,'application/vnd.android.package-archive');
      });

      fileTransfer.onProgress((event: ProgressEvent) => {
        let num = Math.floor(event.loaded / event.total * 100);
        if (num === 100) {
          alert.dismiss();
        } else {
          let title = document.getElementsByClassName('alert-title')[0];
          title && (title.innerHTML = '下载进度：' + num + '%');
        }
      });
    }
    if (this.isIos()) {
      this.openUrlByBrowser(APP_DOWNLOAD);
    }
  }

  /**
   * 通过浏览器打开url
   */
  openUrlByBrowser(url:string):void {
    this.inAppBrowser.create(url, '_system');
  }

  /**
   * 是否真机环境
   * @return {boolean}
   */
  isMobile(): boolean {
    return this.platform.is('mobile') && !this.platform.is('mobileweb');
  }

  /**
   * 是否android真机环境
   * @return {boolean}
   */
  isAndroid(): boolean {
    return this.isMobile() && this.platform.is('android');
  }

  /**
   * 是否ios真机环境
   * @return {boolean}
   */
  isIos(): boolean {
    return this.isMobile() && (this.platform.is('ios') || this.platform.is('ipad') || this.platform.is('iphone'));
  }

  /**
   * 获得app版本号,如0.01
   * @description  对应/config.xml中version的值
   * @returns {Promise}
   */
  getVersionNumber(): Promise {
    return new Promise((resolve) => {
      this.appVersion.getVersionNumber().then((value: string) => {
        resolve(value);
      }).catch(err => {
        console.log('getVersionNumber:' + err);
      });
    });
  }
}

• Constants.ts你可以先访问这两个url看是什么鬼

export const APP_DOWNLOAD = 'http://omzo595hi.bkt.clouddn.com/download.html';//app下载地址
export const APK_DOWNLOAD = 'http://omzo595hi.bkt.clouddn.com/ionic2_tabs.apk';//apk下载完整地址

最后

• 后来把app升级逻辑放到单独的service中了.源码VersionService.ts

• ios下载.ipa文件是不能直接打开安装的,一般的ios app升级都是跳到App Store中

• 我们的企业用app,一般不上应用商店,所以要制作单独的下载页面,像这个页面,app需要升级的时候跳到这个下载页面,用户手动下载安装

• 下载页面制作教程看这里

• app下载完成不能安装?检查手机是否安装了同id的app,卸载即可

app升级版本号只能升不能降
release版本和debug版本不能同时安装,如果已经安装了release版本,再安装debug版会安装失败