Ionic4.x、Cordova Android 檢測應用版本號、服務器下載文件以及實現App自動升級、安裝

Android App 升級執行流程

 

1、獲取本地版本號
2、請求服務器獲取服務器版本號

3、本地版本和服務器版本不一致提示升級，彈窗提示用戶是否更新

4、用戶確定升級，調用文件傳輸方法下載 apk 文件

5、監聽下載進度
6、下載完成打開 Apk 進行安裝

注意:在 ios 中沒法直接下載安裝，如果版本不一致直接跳轉到 Ios 應用對應的應用市場就即可。

 

---

 

自動升級 APP 需要的插件

 

插件名稱		插件地址
App Version	cordova-plugin-app-version	https://ionicframework.com/docs/native/app-version/
File Opener	cordova-plugin-file-opener2	https://ionicframework.com/docs/native/file-opener/
File Transfer	cordova-plugin-file-transfer	https://ionicframework.com/docs/native/file-transfer/
File	cordova-plugin-file	https://ionicframework.com/docs/native/file/

 

在 app.module.ts 引入注入

 

import { FileOpener } from '@ionic-native/file-opener/ngx'; import { FileTransfer } from '@ionic-native/file-transfer/ngx'; import { AppVersion } from '@ionic-native/app-version/ngx'; import { File } from '@ionic-native/file/ngx';

 

providers: [
    FileOpener,
    FileTransfer,
    AppVersion,
    File,
    ...
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy } ]

在需要監聽更新下載的頁面引入、注入

import { FileOpener } from '@ionic-native/file-opener/ngx'; import { FileTransfer,FileTransferObject } from '@ionic-native/file-transfer/ngx'; import { AppVersion } from '@ionic-native/app-version/ngx'; import { File } from '@ionic-native/file/ngx'; import { AlertController } from '@ionic/angular';

constructor(private file: File,private transfer:FileTransfer,private appVersion: AppVersion,private fileOpener: FileOpener,public alertController: AlertController) { }

4、獲取版本號

this.appVersion.getVersionNumber().then((value:any) => { console.log(value) }).catch(err => { console.log('getVersionNumber:' + err); });

5、獲取當前的 apk 安裝目錄

 

this.file.dataDirectory

 

const targetUrl = 'http://127.0.0.1:8080/test.apk'; const fileTransfer: FileTransferObject = this.transfer.create(); fileTransfer.download(targetUrl, this.file.dataDirectory + 'test.apk').then((entry) => { }, (error) => { alert(JSON.stringify(error)); });

6、下載文件，監聽下載進度

onst fileTransfer: FileTransferObject = this.transfer.create(); fileTransfer.download(url, this.file.dataDirectory + test.apk'). then((entry) => {
alert('download complete: ' + entry.toURL()); }, (error) => { 
alert(JSON.stringify(error));});

進度:

var oProgressNum=document.getElementById('num'); fileTransfer.onProgress((event: ProgressEvent) => { let num =Math.ceil(event.loaded/event.total * 100); if (num === 100) { oProgressNum.innerHTML='下載完成'; } else { oProgressNum.innerHTML='下載進度:' + num + '%'; } });

7、打開安裝文件

 

 this.fileOpener.open(entry.toURL(), 'application/vnd.android.package-archive') .then(() => { console.log('File is opened') }) .catch(e => { console.log('Error openening file', e) });

 

demo：

import { Component } from '@angular/core'; import { FileOpener } from '@ionic-native/file-opener/ngx'; import { FileTransfer, FileTransferObject } from '@ionic-native/file-transfer/ngx'; import { AppVersion } from '@ionic-native/app-version/ngx'; import { File } from '@ionic-native/file/ngx'; import { AlertController } from '@ionic/angular'; @Component({ selector: 'app-tab1', templateUrl: 'tab1.page.html', styleUrls: ['tab1.page.scss'] }) export class Tab1Page { constructor(private file: File, private transfer: FileTransfer, private appVersion: AppVersion, private fileOpener: FileOpener, public alertController: AlertController) { } //設備加載完成再去調用硬件
 ngAfterContentInit(): void { //Called after ngOnInit when the component's or directive's content has been initialized. //Add 'implements AfterContentInit' to the class.
    this.isUpdate(); } isUpdate() { // 1、獲取當前應用的版本號

    this.appVersion.getVersionNumber().then((value: any) => { console.log(value) //2、請求服務器接口獲取服務器的版本號

      this.showAlert(); }).catch(err => { console.log('getVersionNumber:' + err); }); } async showAlert() { //3.彈窗提示用戶是否更新 
    const alert = await this.alertController.create({ header: '升級!', message: '發現新版本,是否立即升級？', buttons: [ { text: '取消', role: 'cancel', cssClass: 'secondary', handler: (blah) => { } }, { text: '確認', handler: () => { //4.下載apk
            this.downloadApp(); } } ] }); await alert.present(); } downloadApp() { //4.下載apk
    const targetUrl = 'http://127.0.0.1:8080/test.apk'; const fileTransfer: FileTransferObject = this.transfer.create(); console.log(this.file.dataDirectory);   //獲取當前應用的安裝（home）目錄 1、應用包名稱要一致 2、升級的包的版本號要大於當前應用的版本號 3、簽名要一致 4、sdk 要安裝
 fileTransfer.download(targetUrl, this.file.dataDirectory + 'aaa.apk').then((entry) => { //6、下載完成調用打開應用

       this.fileOpener.open(entry.toURL(), 'application/vnd.android.package-archive') .then(() => { console.log('File is opened') }) .catch(e => { console.log('Error openening file', e) }); }, (error) => { alert(JSON.stringify(error)); }); //5、獲取下載進度 
    var oProgressNum = document.getElementById('progressnum'); fileTransfer.onProgress((event) => { let num = Math.ceil(event.loaded / event.total * 100);  //轉化成1-100的進度
      if (num === 100) { oProgressNum.innerHTML = '下載完成'; } else { oProgressNum.innerHTML = '下載進度：' + num + '%'; } }); } }

 

效果：

 

---

出現失敗問題可能如下：

1.無法獲取下載請求 

　　1)先檢查驗證url是否正確

　　2).Android9.0以上改為https，使用域名下載

2.更換下載插件，使用downloader

ionic cordova plugin add integrator-cordova-plugin-downloader npm install @ionic-native/downloader

3.無法打開跳轉安裝，請先檢查權限問題：

在platforms\android\app\src\main中的AndroidManifest.xml添加

<uses-permission android:name="android.permission.REQUEST_INSTALL_PACKAGES" />

4.其他情況原因導致的，可能是手機版本或sdk環境，或插件版本或ionic版本和插件兼容性等等問題