Cordova 代码热更新解决方案

认准官方正宗插件:https://github.com/nordnet/cordova-hot-code-push,另一个插件 cordova-app-loader 其实远不如这个。

集成非常简单,只需在默认情况下进行开发即可。配置好这个插件之后,我们可以通过远程更新 www 目录下的文件版本,达到通过服务器动态更新代码文件的目的。

但是操作上依然存在一些未能覆盖的地方,(插件的文档非常赞,读完就调试通了,但是依然花了不少时间。)因此在这里将具体的操作步骤列举一下:

步骤概述

  1. 在生产和部署环境 npm 安装 全局 cordova-hot-code-push-cli 插件
  2. 在服务器端创建一个可供下载的 www 代码更新目录,并且放入最新的 www 代码
  3. 在 cordova 项目中添加 cordova-hot-code-push-plugin
  4. 【重要】在 cordova 项目的 config.xml 中加入 <chcp> 配置段,将更新地址指向 www 代码更新目录
  5. 重新编译 www 目录,编译完之后执行 cordova-hcp build
  6. 将新编译的 www 目录打包发布 app,同时上传到服务器端的 www 代码更新目录

后面的话我们更新客户端的话就完全不需要发包了,只需要:

  1. 重新编译 www 目录,编译完之后执行 cordova-hcp build
  2. 将新编译的 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.jsonchcp.manifest 两个文件

将新编译的 www 目录打包发布 app,同时上传到服务器端的 www 代码更新目录

最后,将其上传到对应的服务器端目录:

    <chcp>
        <config-file url="http://example.com/www/chcp.json" />
    </chcp>

也就是 http://excample.com/www/ 对应到刚才打包的 /dist 目录

事实上后期更新 app,只需要做最后两步即可,客户端会自行更新。


【转载请附】愿以此功德,回向 >>

原文链接:http://www.huangwenchao.com.cn/2017/04/cordova-%e4%bb%a3%e7%a0%81%e7%83%ad%e6%9b%b4%e6%96%b0%e8%a7%a3%e5%86%b3%e6%96%b9%e6%a1%88.html【Cordova 代码热更新解决方案】

发表评论

电子邮件地址不会被公开。 必填项已用*标注