Ionic4.x、Cordova Android 检测应用版本号、服务器下载文件以及实现App自动升级、安装

摘要:
AndroidApp升级执行流程1、获取本地版本号2、请求服务器获取服务器版本号3、本地版本和服务器版本不一致提示升级,弹窗提示用户是否更新4、用户确定升级,调用文件传输方法下载apk文件5、监听下载进度6、下载完成打开Apk进行安装注意:在ios中没法直接下载安装,如果版本不一致直接跳转到Ios应用对应的应用市场就即可。

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,publicalertController: 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 classTab1Page {


  constructor(private file: File, private transfer: FileTransfer, private appVersion: AppVersion, private fileOpener: FileOpener, publicalertController: 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 + '%';

      }
    });

  }
}

效果:

Ionic4.x、Cordova Android 检测应用版本号、服务器下载文件以及实现App自动升级、安装第1张


出现失败问题可能如下:

1.无法获取下载请求

1)先检查验证url是否正确

2).Android9.0以上改为https,使用域名下载

2.更换下载插件,使用downloader

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

3.无法打开跳转安装,请先检查权限问题:

在platformsandroidappsrcmain中的AndroidManifest.xml添加

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

4.其他情况原因导致的,可能是手机版本或sdk环境,或插件版本或ionic版本和插件兼容性等等问题

免责声明:文章转载自《Ionic4.x、Cordova Android 检测应用版本号、服务器下载文件以及实现App自动升级、安装》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Qt开源作品30-农历控件ORACLE创建表空间、创建用户、更改用户默认表空间以及授权、查看权限下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

[译]在启用浏览器功能的INFOPATH表单中实现基于SQL SERVER的多级联动的下拉式列表

翻译:实现多级联动的下拉式列表 原文:http://blogs.msdn.com/infopath/archive/2006/10/12/cascading-dropdowns-in-browser-forms.aspx 如果你使用Office InfoPath客户端软件去创建解决方案,很方便地去使用“筛选”功能,去筛选下拉列表框的值,但是“筛选”功能在基...

VS2010/MFC编程入门之前言

鸡啄米的C++编程入门系列给大家讲了C++的编程入门知识,大家对C++语言在语法和设计思想上应该有了一定的了解了。但是教程中讲的例子只是一个个简单的例程,并没有可视化窗口。鸡啄米在这套VS2010/MFC编程入门教程中将会给大家讲解怎样使用VS2010进行可视化编程,也就是基于窗口的程序。 C++编程入门系列主要偏重于理论方面的知识,目的是让大家打好底子,...

win10 .net3.5的问题及解决方案

近日有网友反映在windows10_64位系统电脑上安装Net framework3.5,操作时总失败,怎么办呢?小编下面就介绍win10 64位系统无法安装Net framework3.5的两种解决方案吧 在Windows10中,当我们安装某些软件的时候会提示“你的电脑上的应用需要使用以下Windows功能:.NET Framework 3.5(包括....

Icinga快速安装与配置

简体中文    繁體中文 Icinga快速安装与配置 1.1. 绪论 1.2. 前提条件 1.3. 安装软件包 1.4. 创建帐户信息 1.5. 编译和安装Icinga(包括IDOUtils) 1.5.1. 编译和安装 1.6. 定制配置 1.6.1. 启用idomod event broker 模块 1.7. 数据库创建和IDOUtils 1....

安装win7的解决方法(“安装程序无法定位现有系统分区,也无法创建新的系统分区”)(转载记录一下备案)

  安装win7的解决方法(“安装程序无法定位现有系统分区,也无法创建新的系统分区”)   “安装程序无法定位现有系统分区,也无法创建新的系统分区”提示  我在使用win pe模式安装win7 ( 32 位)的时候出现“安装程序无法定位现有系统分区,也无法创建新的系统分区”提示。  解决步骤:  第一步:把win7镜像发在你电脑的非系统盘的其他硬盘上。  ...

5款顶尖Windows文件传输工具

5款顶尖Windows文件传输工具 英文原文: Drasko 日常工作中,公司里的系统管理员或其他岗位的员工都需要传递大量各种类型的文件和文档。其中一些可以通过 email 收发。但由于 email 附件有文件大小限制,因此需要使用文件传输工具来传递较大的文件。在这种情况下就需要文件传输工具出场了。本文即将介绍 5 款顶尖高效免费 Windows 文件传输...