精华 ionic 自动更新APP
发布于 2年前 作者 zxj963577494 26462 次浏览 来自 分享

一、准备工作   1.Cordova插件:     cordova plugin add https://github.com/whiteoctober/cordova-plugin-app-version.git // 获取APP版本     cordova plugin add org.apache.cordova.file // 文件系统     cordova plugin add org.apache.cordova.file-transfer //文件传输系统     cordova plugin add https://github.com/pwlin/cordova-plugin-file-opener2 //文件打开系统   2.AngularJS Cordova插件     ngCordova 二、相关代码,app.js

.run(['$ionicPlatform', '$rootScope','$ionicActionSheet', '$timeout','$cordovaAppVersion', '$ionicPopup', '$ionicLoading','$cordovaFileTransfer', '$cordovaFile', '$cordovaFileOpener2', function ($ionicPlatform, $rootScope,$ionicActionSheet, $timeout,  $cordovaAppVersion, $ionicPopup, $ionicLoading, $cordovaFileTransfer, $cordovaFile, $cordovaFileOpener2) {
        $ionicPlatform.ready(function ($rootScope) {
            // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
            // for form inputs)
            if (window.cordova && window.cordova.plugins.Keyboard) {
                cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
            }
            if (window.StatusBar) {
                // org.apache.cordova.statusbar required
                StatusBar.styleDefault();
            }

            //检测更新
            checkUpdate();

            document.addEventListener("menubutton", onHardwareMenuKeyDown, false);
        });


        // 菜单键
        function onHardwareMenuKeyDown() {
            $ionicActionSheet.show({
                titleText: '检查更新',
                buttons: [
                    { text: '关于' }
                ],
                destructiveText: '检查更新',
                cancelText: '取消',
                cancel: function () {
                    // add cancel code..
                },
                destructiveButtonClicked: function () {
                    //检查更新
                    checkUpdate();
                },
                buttonClicked: function (index) {

                }
            });
            $timeout(function () {
                hideSheet();
            }, 2000);
        };

        // 检查更新
        function checkUpdate() {
            var serverAppVersion = "1.0.0"; //从服务端获取最新版本
            //获取版本
            $cordovaAppVersion.getAppVersion().then(function (version) {
                //如果本地于服务端的APP版本不符合
                if (version != serverAppVersion) {
                    showUpdateConfirm();
                }
            });
        }

        // 显示是否更新对话框
        function showUpdateConfirm() {
            var confirmPopup = $ionicPopup.confirm({
                title: '版本升级',
                template: '1.xxxx;</br>2.xxxxxx;</br>3.xxxxxx;</br>4.xxxxxx', //从服务端获取更新的内容
                cancelText: '取消',
                okText: '升级'
            });
            confirmPopup.then(function (res) {
                if (res) {
                    $ionicLoading.show({
                        template: "已经下载:0%"
                    });
                    var url = "http://192.168.1.50/1.apk"; //可以从服务端获取更新APP的路径
                    var targetPath = "file:///storage/sdcard0/Download/1.apk"; //APP下载存放的路径,可以使用cordova file插件进行相关配置
                    var trustHosts = true
                    var options = {};
                    $cordovaFileTransfer.download(url, targetPath, options, trustHosts).then(function (result) {
                        // 打开下载下来的APP
                        $cordovaFileOpener2.open(targetPath, 'application/vnd.android.package-archive'
                        ).then(function () {
                                // 成功
                            }, function (err) {
                                // 错误
                            });
                        $ionicLoading.hide();
                    }, function (err) {
                        alert('下载失败');
                    }, function (progress) {
                        //进度,这里使用文字显示下载百分比
                        $timeout(function () {
                            var downloadProgress = (progress.loaded / progress.total) * 100;
                            $ionicLoading.show({
                                template: "已经下载:" + Math.floor(downloadProgress) + "%"
                            });
                            if (downloadProgress > 99) {
                                $ionicLoading.hide();
                            }
                        })
                    });
                } else {
                    // 取消更新
                }
            });
        }
    }])  

上面是一个简单实现方式,一些数据都在这里写死了,你可以将一些数据从服务端获取,比如最新版本号,最新版的下载路径,这里提供一个思路。 项目地址:https://github.com/zxj963577494/ionic-AutoUpdateApp 只需执行ionic build android即可

26 回复

+1,也可以在存放apk的地方,添加一个xml文件,里面记载新版本的version和info,这样就不需要更新服务器端,app解析xml就可以了;现在还有一种做法是不更新apk,只更新其中的www/的文件

@zhanyz 只更新www/怎么做到?这样是不是就能绕过apple store 审核了?

@DongHongfei 可以使用cordova-app-loader插件进行实现的,只更新需要更新的文件,不需要更新整个APP

@DongHongfei 是的,这样子版本更新就不会再等待审核了,现在很多ios上的游戏都是这样子,但不知道是不是这样子实现

@zhanyz 很多是类似lua的脚本,不过苹果新的政策已经禁止这种方式升级了,不知道html这边之后苹果会不会采取什么限制

@DongHongfei 这种应该可以吧,启动先检查更新后才进入index页面

弱弱的问一句,从代码看,好象是针对ANDROID的,IOS的也适用这份代码吗?如果不适用,能否给个思路或示例?多谢。

@r123qq 没做过ios开发,很抱歉

@r123qq ios的更新是不用下载安装的,最多只能做到提示有新版本,用户需要自行到appstore下载更新

我看到有的IOS软件的升级是这样子的,APP内有菜单,版本升级,一按这个菜单,它会检查有无新版本,如果有新版本,就一下跳到APPSTORE上软件新版本那个界面去了。 不知这个功能如何实现?

嗯,有可能是链接跳转,因为APPSTORE软件好象是一个超级链接的地址

@r123qq 这个其实很简单,就是通过审核后,会有一个固定的appstore的链接,然后你的代码里面设置就行了

感觉分享经验,目前比较合适的升级方案是:只更新www 和app全部更新配合使用。常规更新使用cordova-app-loader或ionic-deploy,需要更新plugin的时候使用楼主提供的这种方式。 @zxj963577494 cordova-app-loader可以支持版本回退吗?我看了下ionic-deploy可以支持回退,但是更新的时候必须www全部更新,不像cordova-app-loader可以只更新部分文件。 ps:ionic-deploy可以不走ionic.io,可以自己搭更新的服务器。

@welchwsy ionic-deploy不走ionic.io,自己搭更新的服务器怎么搞?有文档吗?

不错的分享,谢谢!

@hudichao 这边有个参考http://blog.scaperow.com/ ,服务端自己搭一个。

不错。之前是想找这样的解决方案的。谢谢分享。

使用 ionic 更新插件可以完成,可以参考 http://www.scaperow.com/133

@zxj963577494 你好,这个插件我用的时候貌似有点问题,你有时间指导我一下不?谢谢了 410493517这个是我qq

apk是gzip格式的,$cordovaFileTransfer无法读取gzip格式的文件的大小,所以progress.total 一直为0。

On both Android an iOS, lengthComputable is false for downloads that use gzip encoding.

可以在github的文档的最下面找到这句话。

+1,很好,谢谢分享
发自 Ioniclub

你好,我用你这个demo做了,下,但是我的app报错,是抱code:3的一个错误,请问怎么解决

回到顶部