认准官方正宗插件:https://github.com/nordnet/cordova-hot-code-push,另一个插件 cordova-app-loader 其实远不如这个。
集成非常简单,只需在默认情况下进行开发即可。配置好这个插件之后,我们可以通过远程更新 www 目录下的文件版本,达到通过服务器动态更新代码文件的目的。
但是操作上依然存在一些未能覆盖的地方,(插件的文档非常赞,读完就调试通了,但是依然花了不少时间。)因此在这里将具体的操作步骤列举一下:
步骤概述
- 在生产和部署环境 npm 安装 全局
cordova-hot-code-push-cli
插件 - 在服务器端创建一个可供下载的 www 代码更新目录,并且放入最新的 www 代码
- 在 cordova 项目中添加
cordova-hot-code-push-plugin
- 【重要】在 cordova 项目的
config.xml
中加入<chcp>
配置段,将更新地址指向 www 代码更新目录 - 重新编译 www 目录,编译完之后执行
cordova-hcp build
- 将新编译的 www 目录打包发布 app,同时上传到服务器端的 www 代码更新目录
后面的话我们更新客户端的话就完全不需要发包了,只需要:
- 重新编译 www 目录,编译完之后执行
cordova-hcp build
- 将新编译的 www 目录上传到服务器端的 www 代码更新目录
然后客户端就会自动更新代码,是不是很酷。
下面具体解释操作步骤
在生产和部署环境 npm 安装 全局 cordova-hot-code-push-cli
插件
这步超简单,不过在墙内可能得等等
npm i -g cordova-hot-code-push-cli
完成之后你就拥有了 cordova-hcp
命令,这个命令可以用来生成 www 目录的版本 manifest 文件:
www/chcp.json
www/chcp.manifest
这个相当于就是整套代码的版本戳,app 端是通过这两个文件来决定更不更新以及更新的内容的,后面具体补充。
在服务器端创建一个可供下载的 www 代码更新目录,并且放入最新的 www 代码
这一步,我们只需要在 nginx 配置一下即可,例如我们们配置这个目录:
http://example.com/www/
于是,确保最终所有步骤完成之后,这几个文件必须能访问到:
http://example.com/www/index.html
http://example.com/www/chcp.json
http://example.com/www/chcp.manifest
有就应该
有一点需要特别注意,就是这个目录务必做成不缓存,例如采用如下的 nginx 配置:
location /www {
alias /$MY_APP_DIR/dist;
add_header Cache-Control no-store;
}
在 cordova 项目中添加 cordova-hot-code-push-plugin
这个好办,在 cordova 项目的根目录:
cordova plugin add --save cordova-hot-code-push-plugin
【重要】在 cordova 项目的 config.xml
中加入 <chcp>
配置段,将更新地址指向 www 代码更新目录
这一步非常重要,直接将这段配置丢在 cordova 项目的 config.xml
里面(<widget>
标签内,与 <content src="index.html"/>
同级,可以放到最后)
<chcp>
<config-file url="http://example.com/www/chcp.json" />
</chcp>
重新编译 www 目录,编译完之后执行 cordova-hcp build
以后每次编译完 www 的文件,将 www 文件执行 cordova-hcp build
打个戳。
举个例子:我的 webpack 项目 /var/myapp
,生成的目标代码在 /var/myapp
首先我需要配置一下 chcp 的基础配置:
# 注意这里是你们自己的前端项目目录哦
cd /var/myapp
cordova-hcp init
然后会提示输入各个参数,至于 Amazon 那几个直接跳过
ios_identifier 的话:
在 Apple 开发者账号的 iTunes Connect 里面 App 页面的最后这串数字
android_identifier 是你应用的 id,例如 io.cordova.hellocordova
上面这两个参数都不重要,关键是下面的 content_url 参数,请将其指向服务器发布的可访问 www 目录。
最终生成一个这样的 cordova-hcp.json
,可以将这个文件加入到前端项目的代码库中:
{
"name": "dizhutao",
"ios_identifier": "1210638557",
"android_identifier": "cn.easecloud.dizhutao",
"update": "resume",
"content_url": "http://app.dizhutao.cn/dist/"
}
准备完成之后,我们可以先将代码 build 到 dist
目录,然后运行 cordova-hcp build
:
npm run build
cordova-hcp build dist
显示出下面这段格式的信息就基本成功了:
Running build
Config { name: 'dizhutao',
ios_identifier: '1210638557',
android_identifier: 'cn.easecloud.dizhutao',
update: 'resume',
content_url: 'http://app.dizhutao.cn/dist/',
release: '2017.04.15-08.02.20' }
Build 2017.04.15-08.02.20 created in /home/alfred/app/dizhutao-front/dist
可以看到 dist 目录下面多了 chcp.json
和 chcp.manifest
两个文件
将新编译的 www 目录打包发布 app,同时上传到服务器端的 www 代码更新目录
最后,将其上传到对应的服务器端目录:
<chcp>
<config-file url="http://example.com/www/chcp.json" />
</chcp>
也就是 http://excample.com/www/
对应到刚才打包的 /dist
目录
事实上后期更新 app,只需要做最后两步即可,客户端会自行更新。
你好,cordova10.0 ios 6.0.1 加入热更新插件再编译会报错,怎么解决? CHCP plugin after prepare hook: Failed to load iOS project file. Maybe your Cordova version is not supported?