Ionic实现iOS与Android端代码『热更新』

简介: 热更新的好处通常ionic源码可包括(HTML,JavaScript,CSS文件和其他资源),往常我们必须通过提交程序到应用市场,经过漫长的审核后才可让用户更新,每改动一个小地方都需要重新打新版本。

热更新的好处
通常ionic源码可包括(HTML,JavaScript,CSS文件和其他资源),往常我们必须通过提交程序到应用市场,经过漫长的审核后才可让用户更新,每改动一个小地方都需要重新打新版本。

现在ionic通过使用cordova插件cordova-hot-code-push实现实现iOS与Android端代码『热更新』功能,可不必发布应用市场经平台审核,便可动态更新App源码的目的。

热更新实现原理

img_7166cfeb1fd0d62ffa2691f5c9c2ab2e.png
这里写图片描述

基础实现方法
1、安装 cordova-hot-code-push-cli

使用命令安装

npm install -g cordova-hot-code-push-cli

主要是生成检测配置文件,通常是在 www 目录下动态生成 chcp.json 和 chcp.manifest 生成两个文件,插件源码地址:

https://github.com/nordnet/cordova-hot-code-push

2、创建项目

包含 www 目录的项目,已有项目无需重新创建

3、安装热更新插件

使用命令安装

ionic plugin add cordova-hot-code-push-plugin
ionic plugin add cordova-hot-code-push-local-dev-addon

4、打包封装

执行命令cordova-hcp build 或者 cordova build

5、启动 hcp server 服务

重新打开一个终端窗口,cd到项目目录(包含www目录的父级目录)执行命令

cordova-hcp server

稍等会在 www 目录下动态生成 chcp.json 和 chcp.manifest 生成两个文件

6、正常在运行完成前4步以后会在我们config.xml动态加入如图所示链接地址

[图片上传失败...(image-6c20b3-1518154503982)]

[图片上传失败...(image-8f9793-1518154503982)]

图中链接地址https://1980480f.ngrok.io/chcp.json,修改为在第8步www目录里chcp.json文件可访问的地址:

例如:http://kaibin.me/hotcode/chcp.json

7、运行代码或打包我们的App

8、修改我们想要更新的代码

然后修改 chcp.json 文件的 content_url ,此地址为我们项目放置的地址

{
  "autogenerated": true,
  "release": "2016.07.17-11.36.13",
  "content_url": "http://kaibin.me/hotcode",
  "update": "now"
}

9、将项目www目录代码上传到服务器可访问的目录里

例如在服务器根目录创建hotcode命名的目录将项目www里的文件上传上去

10、 关闭我们的应用重新打开,看看代码是否更新成功

优化流程
1.创建cordova-hcp模板

线上测试可卸载掉 cordova-hot-code-push-local-dev-addon防止每次自动更新新版本,可通过命令卸载:

cordova plugin remove cordova-hot-code-push-local-dev-addon

可以在 cordova 项目根目录下放一个 cordova-hcp.json,这是个模板文件
这样每次执行

cordova-hcp build

就会利用这个模板生成新的 chcp.json,而不用手动更改 www/chcp.json了。
cordova-hcp.json内容如下:

{
  "autogenerated": true,
  "content_url": "http://kaibin.me/hotcode",
  "min_native_interface": 1, // app内核版本号
  "ios_identifier": "https://itunes.apple.com/cn/app/***", // iOS上线后的地址,用于内核版本更新后的确认跳转
  "update": "now"
}

2.Build options build设置,配置开发环境、测试环境与生产环境

在 /Cordova/Testproject/ 下创建 chcpbuild.options 文件,文件内容如下:

{
  "dev": {
    "config-file": "https://dev.kaibin.me/hotcode/www/chcp.json"
  },
  "production": {
    "config-file": "https://kaibin.me/hotcode/chcp.json"
  },
  "QA": {
    "config-file": "https://test.kaibin.me/hotcode/chcp.json"
  }
}

这样在build app的时候, 转为开发要用的服务器, 可执行:

ionic build -- chcp-dev

结果就是, 特定拍下的 config.xml 文件(比如, /Cordova/TestProject/platforms/android/res/xml/config.xml) 变成了这样:

<chcp>
  <config-file url="https://dev.kaibin.me/hotcode/chcp.json"/>
</chcp>

当我们需要上架app的时候 (Google Play, App Store) - 我们正常build:

ionic build --release

这样 config.xml 不会改变

如果没有使用 chcpbuild.options 插件会使用 config.xml 里面默认的值。

文件必须位于 Cordova 项目根目录. 在这个文件里面,指定(JSON格式) 所有想改变 config.xml 文件的配置,源文件 config.xml (Cordova项目根目录) 不会发生变动, 改变的是 特定平台下的 config.xml (在cordova build过程的 after_prepare 阶段)。

通过min_native_interface监控app是否提示更新

所需最小的外壳app版本. 这是app的build版本号,是个整型数字, 不是应用商店中看到的形如”1.0.0”字符串。

在 config.xml中,这样指定build版本号:

<chcp>
    <native-interface version="1"/>
    <config-file url="http://kaibin.me/hotcode/chcp.json"/>
</chcp>

与www目录下的chcp.json里面的min_native_interface数值相对应

例如:app外壳里的config.xml是这样的:

<chcp>
    <native-interface version="1"/>
    <config-file url="http://kaibin.me/hotcode/chcp.json"/>
</chcp>

若服务器里的min_native_interface也对应是1,不会出现提示用户升级的状态,正常修改www目录的内容通过更新release值,可实现热更新。

{ 
 "autogenerated": true,
 "content_url": "http://kaibin.me/hotcode", 
 "min_native_interface": 1, // app内核版本号
 "ios_identifier": "https://itunes.apple.com/cn/app/***", // iOS上线后的地址,用于内核版本更新后的确认跳转
 "release": "2017.07.17-12.22.11",
 "update": "now"
}

假设你的外壳app加了个新的插件,应该会更新外壳app。为了防止用户通过热更新下载了不适合他现有外壳app的web内容,你应该设置 min_native_interface 这个值

{ 
 "autogenerated": true,
 "content_url": "http://kaibin.me/hotcode",
 "min_native_interface": 1, // app内核版本号
 "ios_identifier": "https://itunes.apple.com/cn/app/***", // iOS上线后的地址,用于内核版本更新后的确认跳转 
 "release": "2017.07.17-12.28.21",
 "min_native_interface": 2,
 "update": "now"
}

插件加载到这段json的时候, 发现 min_native_interface 比当前外壳app的build号要大,便不会下载web内容。而是触发一个chcp_updateLoadFailed 错误通知, 告诉用户需要升级外壳app了。

chcp.json中update字段含义

指定了什么时候安装web内容更新,支持的值有:

start - app启动时安装更新,默认值
resume - app从后台切换过来的时候安装更新
now - web内容下载完毕即安装更新

引导用户去应用商店更新外壳app或下载新版本
通过给web更新设置最小支持的外壳app版本 min_native_interface。 如果插件检查发现用户安装的外壳app版本比服务端新的web内容要求的版本要低,就会触发错误事件,错误码:

chcp.error.APPLICATION_BUILD_VERSION_TOO_LOW

通过这个错误码可通过弹窗提示用户去升级,跳转到AppStore或下载新安装包(国内因GFW,跳转到google应用商店就算了= =)

chcp.json 里增加min_native_interface的值

js端监听相应事件,并在出现错误的时候调用 chcp.requestApplicationUpdate 方法

cordova-plugin-file,cordova-plugin-file-transfer,cordova-plugin-file-opener2先把这几个插件安装好

var appUpdate = {
        // Application Constructor
        initialize: function() {
            this.bindEvents();
        },
        // Bind any events that are required.
        // Usually you should subscribe on 'deviceready' event to know, when you can start calling cordova modules
        bindEvents: function() {
            document.addEventListener('deviceready', this.onDeviceReady, false);
            document.addEventListener('chcp_updateLoadFailed', this.onUpdateLoadError, false);
        },
        // deviceready Event Handler
        onDeviceReady: function() {
        },
        onUpdateLoadError: function(eventData) {
            var error = eventData.detail.error;

            // 当检测出内核版本过小
            if (error && error.code == chcp.error.APPLICATION_BUILD_VERSION_TOO_LOW) {
                var dialogMessage = '有新的版本,请下载更新';

                // iOS端 直接弹窗提示升级,点击ok后自动跳转
                if(ionic.Platform.isIOS()){
                    chcp.requestApplicationUpdate(dialogMessage, this.userWentToStoreCallback, this.userDeclinedRedirectCallback);
                // Android端 提示升级下载最新APK文件
                }else if(ionic.Platform.isAndroid()){
                    var confirmPopup = $ionicPopup.confirm({
                        template: '有新的版本,请下载更新',
                        cssClass: 'popup',
                        cancelText:'取消',
                        okText:'升级'
                    });
                    confirmPopup.then(function (res) {
                        if (res) {
                            $ionicLoading.show({
                                template: "已经下载:0%"
                            });
                            window.resolveLocalFileSystemURL(cordova.file.externalRootDirectory, function(fileEntry) {
                                fileEntry.getDirectory("***(app名称)", { create: true, exclusive: false }, function (fileEntry) {
                                    //下载代码
                                    var fileTransfer = new FileTransfer();
                                    fileTransfer.download("app下载地址", fileEntry.toInternalURL()+"***(app名称).apk", function(entry) {
                                        // 打开下载下来的APP
                                        cordova.plugins.fileOpener2.open(
                                            entry.toInternalURL(),//下载文件保存地址
                                            'application/vnd.android.package-archive', {//以APK文件方式打开
                                                error: function(err) {
                                                },
                                                success: function() {}
                                            });
                                    }, function(err) {
                                    },true);
                                    fileTransfer.onprogress = function(progressEvent) {
                                        $timeout(function () {
                                            var downloadProgress = (progressEvent.loaded / progressEvent.total) * 100;
                                            $ionicLoading.show({
                                                template: "已经下载:" + Math.floor(downloadProgress) + "%"
                                            });
                                            if (downloadProgress > 99) {
                                                $ionicLoading.hide();
                                            }
                                        });
                                    };
                                },function(err){alert("创建失败")});
                            });
                        }
                    });
                }
            }
        },
        userWentToStoreCallback: function() {
            // user went to the store from the dialog
        },
        userDeclinedRedirectCallback: function() {
            // User didn't want to leave the app.
            // Maybe he will update later.
        }
    };
    appUpdate.initialize();

iOS与Android的出现的问题
在build ios的app时config.xml的

<name>***</name>

name不可使用中文,设置app名称为中文,可通过Xcode修改Resources目录下的***-Info.plist内的Bundle display name字段即可

感谢分享:http://kaibin.me/2016/07/17/ionic-hotcode/

相关文章
|
4天前
|
存储 安全 Android开发
探索Android与iOS的隐私保护机制
在数字化时代,移动设备已成为我们生活的一部分,而隐私安全是用户最为关注的问题之一。本文将深入探讨Android和iOS两大主流操作系统在隐私保护方面的策略和实现方式,分析它们各自的优势和不足,以及如何更好地保护用户的隐私。
|
4天前
|
安全 数据安全/隐私保护 Android开发
探索Android与iOS的隐私保护策略
在数字时代,智能手机已成为我们生活中不可或缺的一部分,而随之而来的则是对个人隐私和数据安全的日益关注。本文将深入探讨Android与iOS两大操作系统在隐私保护方面的策略和实践,分析它们如何应对日益严峻的隐私挑战,以及用户应如何保护自己的数据安全。通过对比分析,我们将揭示两大系统在隐私保护方面的优势和不足,为用户提供有价值的见解和建议。
|
4天前
|
Android开发 Swift iOS开发
深入探索iOS与Android操作系统的架构差异及其对应用开发的影响
在当今数字化时代,移动设备已经成为我们日常生活和工作不可或缺的一部分。其中,iOS和Android作为全球最流行的两大移动操作系统,各自拥有独特的系统架构和设计理念。本文将深入探讨iOS与Android的系统架构差异,并分析这些差异如何影响应用开发者的开发策略和用户体验设计。通过对两者的比较,我们可以更好地理解它们各自的优势和局限性,从而为开发者提供有价值的见解,帮助他们在这两个平台上开发出更高效、更符合用户需求的应用。
|
5天前
|
前端开发 Android开发 开发者
探索Android与iOS的跨平台开发策略
在当今多元化的移动设备市场中,开发者面临着为不同操作系统设计应用的挑战。本文深入探讨了Android和iOS两大主流平台的跨平台开发策略。我们将分析使用Flutter、React Native等框架进行跨平台开发的优劣,并讨论如何克服各平台间的差异性,以实现高效、一致的用户体验。此外,文章还将提供一些实用的技巧和最佳实践,帮助开发者优化跨平台应用的性能和兼容性。
20 4
|
7天前
|
安全 Android开发 iOS开发
深入探讨Android与iOS操作系统的差异性
本文旨在通过对比分析Android和iOS两大主流移动操作系统,揭示它们在设计理念、用户体验、安全性、应用生态及系统更新等方面的根本差异。不同于传统的功能列表式摘要,本摘要强调了两大系统背后的哲学思想及其对用户日常使用的实际影响,为读者提供了一个宏观且深入的视角来理解这两种操作系统的独特之处。
|
6天前
|
Android开发 Swift iOS开发
探索安卓与iOS开发的差异和挑战
【10月更文挑战第37天】在移动应用开发的广阔舞台上,安卓和iOS这两大操作系统扮演着主角。它们各自拥有独特的特性、优势以及面临的开发挑战。本文将深入探讨这两个平台在开发过程中的主要差异,从编程语言到用户界面设计,再到市场分布的不同影响,旨在为开发者提供一个全面的视角,帮助他们更好地理解并应对在不同平台上进行应用开发时可能遇到的难题和机遇。
|
6天前
|
存储 安全 数据安全/隐私保护
深入探索Android与iOS的隐私保护机制:一场没有硝烟的较量####
本文深度剖析了Android与iOS两大移动操作系统在用户隐私保护方面的策略与实践,揭示两者在设计理念、技术实现及用户体验上的异同。通过对比分析,旨在为读者提供一个全面而深入的视角,理解两大平台如何在保障用户隐私的同时,实现功能的丰富与便捷。本文不涉及具体产品推荐或品牌偏好,仅从技术角度出发,探讨隐私保护的现状与挑战。 ####
|
6天前
|
前端开发 Android开发 iOS开发
探索Android与iOS的跨平台开发策略
在移动应用开发的多元化时代,跨平台开发已成为开发者追求效率和广泛覆盖的重要手段。本文深入探讨了Android与iOS两大主流平台下的跨平台开发策略,分析了各自的优势与挑战,并通过实际案例展示了如何有效实施跨平台解决方案,以期为开发者提供有价值的参考和启示。
|
5天前
|
安全 Android开发 iOS开发
深入探讨Android与iOS的系统架构差异
本文旨在通过对比分析Android和iOS两大移动操作系统的系统架构,揭示它们在设计理念、安全性、应用生态及开发环境等方面的显著差异。我们将从底层架构出发,逐步剖析至用户界面层面,为开发者和科技爱好者提供一份详尽的技术参考。
16 1
|
11天前
|
移动开发 Java Android开发
探索Android与iOS开发的差异性与互联性
【10月更文挑战第32天】在移动开发的大潮中,Android和iOS两大平台各领风骚。本文将深入浅出地探讨这两个平台的开发差异,并通过实际代码示例,展示如何在各自平台上实现相似的功能。我们将从开发环境、编程语言、用户界面设计、性能优化等多个角度进行对比分析,旨在为开发者提供跨平台开发的实用指南。
33 0