cordova + ionic混合apk的更新—H5部分更新

本文为cordova混合开发apk更新的系列文章的第一篇文章：H5部分的更新。

混合应用的开发也已经火到了一定程度了，大家写h5的技术也到了炉火纯青的地步了。那么对于对原生了解比较少的小伙伴来说，apk的更新、发包可能还是一笔糊涂账。对于混合开发来讲，一般更新分为两种：h5部分的更新，原生外壳的更新。下面我们来讲一下基于插件的h5部分热更新的实现流程及注意事项。

一、Cordova热更新的原理

1、热更新：

是指不让用户去应用市场上面重新下载安装包，或者重新安装升级包，实现 APP 的更新升级

2、cordova的热更新：

一个 cordova 应用包括（HTML，JavaScript，CSS 文件和其他资源），传统的更新是我们把我们的程序提交到应用市场，然后用户才可以下载更新。我们每改一个小功能都需要上传到 appstore 然后用户的手机提示更新下载等等

cordova 的 cordova-hot-code-push 插件让这些原本很复杂很麻烦的工作变得简单。我们用 codepush 插件可以直接实现不上传 appstore 更新我们的应用

3、原理

cordova-hot-code-push的核心原理说简单的就是以时间戳为h5部分的版本号，以各个文件生成的hash值作为是否更新的依据生成一个配置文件。
核心原理步骤：
    1、比较文件系统中h5部分的版本号和本地的版本号。如果文件系统的版本号大于本地，进行下一步，否则不更新；
    2、本地各个文件的hash值和服务端文件的hash值，不相同则拉取该文件替换本地文件进行更新；
    3、等所有的文件对比完成后，在拉取配置文件生成一个新的h5包；
    4、根据设置的更新时机，替换原有的h5包

整个过程的原理图如下：
这里写图片描述

下面我们来看看插件具体怎么使用吧。

二、热更新插件的使用

1、插件地址

http://www.phonegap100.com/plugininfo_46.html

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

2、插件的安装

1)、在APP目录下运行cordova plugin add cordova-hot-code-push-plugin

2)、在APP目录下运行cordova plugin add cordova-hot-code-push-local-dev-addon

3)、安装CLI：npm install -g cordova-hot-code-push-cli
    主要是用这个生成检测配置文件，也就是动态生成 chcp.json 和chcp.manifest 生成 两个文件

3、具体操作

**第一步**：新开一个cmd窗口执行cordova-hcp server命令，对应安装的CLI，用来在www目录下生成两个配置文件和检测文件的变化更新配置文件；
    chcp.json
        {
          "autogenerated": true,
          "release": "2016.11.29-11.09.38",
          "content_url": "https://ad71cba3.ngrok.io",//WWW文件夹所在远程地址
          "update": "now"
          // start - app启动时安装更新. 默认值.
          // resume - app从后台切换过来的时候安装更新.
          // now - web内容下载完毕即安装更新.
        }
    chcp.manifest
        [
          {
            "file": "css/iconfont/iconfont.css",
            "hash": "9b801ad1eb80f20265b8cbcc11435707"
          },
          {
            "file": "css/iconfont/iconfont.eot",
            "hash": "2bd6f9b32b3606ac39b46dacb0d8427c"
          },
          ....
        ]
    同时会在config.xml文件中添加一个参数：
      <chcp>
        <config-file url="https://ad71cba3.ngrok.io/chcp.json"/>
        <local-development enabled="true"/>
      </chcp>

    此外还会在项目根目录下有一个文件生成哦.chcpenv:
        {
          "content_url": "https://ad71cba3.ngrok.io",
          "config_url": "https://ad71cba3.ngrok.io/chcp.json"
        }   

    注意事项：config_url为chcp.json文件的地址；content_url为更新包的地址；config.xml中一定要加<local-development enabled="true"/>
    这个哦，否则文件修改后不会更新配置文件

第二步：运行cordova build/ionic build。

到这一步客户端热更新的准备工作已经完成了。下面就是服务器端的工作了。

第三步：在cordova-hcp server命令运行着的前提下，修改www下的文件，你会发现dos里面会有更新了哪些文件的信息。同时会发现chcp.json和chcp.manifest文件发生了变化。

第四步：把第三步中的www目录上传到content_url所指向的服务器目录下。然后打开第二步中生成的apk，你会奇迹的发现，页面更新了，变成了你打包后修改的样子了。

以上测试是在window上进行的android项目的热更新测试。先这样吧，后面有时间了再完善。下一篇写写原生外壳的更新吧。