公司的 cordova 项目前段时间增加了热更新功能, 自己第一次做的时候在网上查找了很多资料, 有的资料写的并不全面遇到了很多坑. 因此总结一些在开发过程中遇到了问题和解决办法.
cordova 项目热更新分为两个部分, 网页内容 (web content) 更新和 Cordova 插件 (native side) 更新. 前者是网页内容, 后者是 cordova 插件. Web content 的运行是基于 native side. 如: 登录页面的微信登录, 需要在项目中集成微信的插件才能实现登录.
Web 代码的更新
此更新方式, 只需要更新 Web 前段代码, 不需要更新 Android 的原生代码. 只是对 JS,html 等的更新.
1, 添加插件 Cordova Hot Code Push https://github.com/nordnet/cordova-hot-code-push
cordova plugin add cordova-hot-code-push-plugin
2, 添加热更新工具
NPM install -g cordova-hot-code-push-cli
3, 添加 cordova-hcp.JSON 文件
此文件是用于方便生成 www 文件下 chcp.JSON 文件的内容.
执行命令(必须在项目根目录执行更新工具的命令)
cordova-hcp init
生成的默认应用程序配置文件 (cordova-hcp.JSON) 在项目根文件夹中.
执行时将要求您从命令行中填写一些项目首选项:
Project name: 你现在的项目名称所需.
Amazon S3 Bucket name: 亚马逊上的 S3 桶的名字. 可以跳过.
Amazon S3 region: 亚马逊 S3 地区. 可以跳过.
iOS App identifier: 应用程序商店的应用程序 ID.App 升级是跳转应用商店进行升级.
Android App identifier: 可以 App 在应用商城的地址, 或者是 apk 的下载地址.
Update method: 何时执行更新.
start: 在启动应用程序时安装更新.
resume: 在恢复应用程序 (从背景移动到前景状态) 或启动时, 安装更新; 默认使用.
now: 从服务器加载更新后立即安装.
cordova-hcp.JSON 文件内容:
- {
- "name": "",// 可为空
- "autogenerated": true,// 如果不添加, 热更新会不能使用
- "ios_identifier": "id123456789",// 应用在 App store id(可为空)
- "android_identifier": "",// 应用在应用商城上的地址或者 App 的下载地址(可为空)
- "update": "start",// 在应用启动时安装
- "min_native_interface": 1,// 可用以做 App 升级(可以不填)
- "content_url":
- "http://************/cordova/www"//www 文件在服务器上的地址
- }
"autogenerated": true 这个值执行命令后是没有的需要自己手动添加, 如果不添加网页内容更新将会无效.
4, 在 www 文件下生成 chcp.JSON 和 chcp.manifest 文件
chcp.JSON: 包含发布相关信息: 热更新代码版本号, 应用 native side 版本号等等
chcp.manifest: 包含项目热更新代码 (静态) 文件信息: 文件名和文件哈希值
执行命令
cordova-hcp build
执行此命令会在 chcp.JSON 文件中增加 "release":"当前时间" 字段.(默认使用时间戳, 格式为: yyyy.MM.dd-HH.mm.ss), 插件将版本号进行字符串相等比较来判断是否存在新版本.
"release": "2017.06.07-16.30.20",// 唯一 Web 项目版本号, 用与热更新 Web 内容的更新.(必需)
5,config.xml 配置
最好写在底部方便以后配置修改
- <chcp>
- <auto-download enabled="true" />
- <auto-install enabled="true" />
- <native-interface version="1" />
- <config-file url="https://************/cordova/www/chcp.json" />
- </chcp>
config-file: 配置文件 chcp.JSON 从服务器上加载的路径(必须的配置项)
auto-download: 是否自动下载热更新代码, 默认是 true
auto-install: 是否自动安装热更新代码, 默认是 true
native-interface: 当前 native side 的版本号
6, 将 www 文件放到服务器
这一步我是直接将项目的 www 文件夹放到服务器上, 然后重启 App, 就可实现 App 的 Web 内容代码的热更新了. 需要注意的是 www 文件在服务地地址一定要与 "content_url":"http://************/cordova/www" 和 config.xml 中 < config-file url="https://************/cordova/www/chcp.json" /> 填写的地址一致.
更新 App
其实完成上面步骤, 就可以实现热更新功能了. 但是当我们增加了 cordova 插件或者原生中添加了第三方库等, 需要对 App 升级. 那么这个时候就要去对应的商城下载 apk(苹果去 App store 升级)因此还需要下面的配置.
1,config.xml 配置中定义 native side 版本号
- <chcp>
- <native-interface version="5" />
- </chcp>
此配置会与服务器上配置文件 chcp.JSON 中的 min_native_interface 值作比较 .
两个值相同 , 不提示升级, 但是网页内容可以更新.
如果大于服务器上的值, 不会提醒更新, 但是网页内容可以更新.
小于服务上的值, 提示应用需要更新升级, 那么热更新将无法正常进行.
2, 添加 JS 代码 Wiki 文档
- document.addEventListener('deviceready', () => {
- let chcp = Windows.chcp;
- // 检测更新
- chcp.fetchUpdate((error, data) => {
- if (error) {
- console.log('-- 更新版本异常, 或其他错误 --', error.code, error.description);
- if (error.code === -2) {
- var dialogMessage = '有新的版本是否下载';
- // 调用升级提示框 点击确认会跳转对应商店升级
- chcp.requestApplicationUpdate(dialogMessage, null, null);
- }
- }
- // 服务器版本信息
- // console.log('-- 更新的版本信息 --', data.config);
- // 版本信息
- chcp.getVersionInfo((err, data) => {
- console.log('服务器应用时间版本:' + data.readyToInstallWebVersion);
- console.log('当前应用时间版本:' + data.currentWebVersion);
- console.log('当前应用 version name:' + data.appVersion);
- });
- });
- });
如果当前 App 中的 < native-interface version="1"/>低于服器上 chcp.JSON 中 min_native_interface 的值, 那么执行热更新就会提示错误: chcp.error.APPLICATION_BUILD_VERSION_TOO_LOW, 返回的异常码为 - 2. 这个时候我们应当提示用户前往应用商店对 App 进行升级.
需要注意的是, 如果弹出的升级提示框点击确认的跳转对应平台升级 App 的地址, 是我们在 cordova-hcp.JSON 中填写的地址; 如果点击了取消, 那么就不会升级, 并且网页的热更新功能也将失效, 除非升级为最新的 apk.
详细错误代码参考
总结:
热更新分为网页内容的跟新和 cordova 插件的更新, 前者更新不需要升级 App, 后者需要升级 App, 在使用热更新功能是最好是两个功能都要实现.
补充:
cordova 如果网页内容和 App 升级两个都要实现, 请将 config.xml 配置选项
- <auto-download enabled="true" />
- <auto-install enabled="true" />
cordova 热更新弹出框很难看, Android 测试为黑色背景绿色文字. 网上找了很多的资料, 也没能找到解决 cordova 自带对话框样式的方法. 如果有解决的方法请留意一下, 谢谢!
相关连接
Cordova 代码热更新 https://www.jianshu.com/p/55fd5e9f96ea
来源: https://juejin.im/post/5c5d88d36fb9a049ec6b8798