在『基于React Native的应用热发布实践』一文中我们提到,一个�业务单元(在Android上通常以Activity来承载)绑定一个bundle,这样我们可以对�业务单元单独进行升级。
本文将来探讨基于React Native应用的业务单元升级方案。
1 升级方案
升级方案分为全量升级和增量升级。先讨论全量升级。
全量升级,首先业务单元以bundle实现,bundle包含实现业务的js文件以及图片资源。每个bundle维护一个版本号。
在服务端前台,维护bundle名称到bundle更新信息的映射(BundleMap),�更新信息包括版本号和bundle文件地址。同时提供更新请求接口,�接口将根据bundle名称,比对请求版本和最新版本,如果请求版本低于最新版本,返回�更新信息。
在服务端后台,提供bundle文件上传功能,上传数据包括bundle名称,版本号,bundle文件。后台根据上传信息,生成bundle的更新信息,并更新到BundleMap。
bundle文件由RN gradle脚本生成,生成文件为zip包。
在App端,版本号内置于代码中,App端向服务端请求更新信息时,带上该版本号。如果有更新版本,则根据返回的更新信息,下载bundle包,并进行文件校验,如果校验成功,则将文件解压到本地目录,并记录新版本号。在下次启动时,比对当前版本和记录的更新版本,如果低于更新版本,则使用新版本bundle文件,同时更新当前版本。
2 基础设计
2.1 Bundle更新信息
Bundle更新信息:
- 名称。Bundle名是带平台属性后缀的(形如:avcgoodsdetail.android)。
- 版本号
- 下载地址
- 文件MD5
3 客户端设计
3.1 Bundle设计
- Bundle更新信息:
1) version
AVCComponent作为通用基本单元,用以承载业务单元。具体业务单元继承自AVCComponent。
AVCComponent定义一个属性version整型值,用以标示当前bundle的版本。每个版本实现时,version值不同,初始值定为0,版本迭代version值递增。
2) Bundle名
AVCComponent绑定一个ReactInfo,ReactInfo包括bundle名称等信息,用以启动AVCComponent。
- Bundle更新流程:
3) 请求更新
AVCComponent提供能用检查更新方法,方便业务单元在合适的时机调用。更新接口需带上ReactInfo的bundle名和version。服务端若有更新回应更新信息。
4) 下载
根据bundle文件下载地址下载bundle包。
5) 校验
下载完成后,进行MD5校验。
6) 解压
校验成功则解压到bundle对应目录。
RN更新包的主目录为/data/data/package/files/react-native。
每个bundle更新包置于bundle名的子目录,bundle的各个版本在bundle目录下建立子目录,对应版本的文件位于版本目录下。
7) 记录更新信息
使用Native的SharedPreferrence记录更新信息,包括版本号和bundle文件路径。
由于更新信息的存取,JS层和Native层两边都要涉及,因此需要使用统一key来获取。
版本号key命名:
bundle名 + .version
Bundle文件路径命名:
bundle名 + .dir
3.2 Bundle更新包的使用
在Native层,Bundle是以AppReactActivity来承载的。
Bundle更新包的使用是通过重载getJSBundleFile
来完成的。
1) 使用新包
新的使用策略:
Bundle记录了当前版本和当前Bundle目录,更新包下载完成后会记录更新版本;如果当前版本小于更新版本,且文件存在,则返回下载完成后记录新包路径,表明使用新包,新包bundle文件为:
新包路径+AssetName
同时更新当前版本记录和当前Bundle路径。
2) 删除老包
使用新包之前,获取当前版本和当前Bundle路径,满足新包使用条件并使用新包,删除先前Bundle路径指向的老包。
3.3 Bundle包生成
1) 构建bundle文件
利用RN提供的打包脚本(react-native bundle
),输入bundle文件和版本号,将bundle文件及其图片资源输出到指定目录(app/build/outputs/react-native)。
2) 生成zip包
将生成到react-native目录的文件打包成zip文件。
3) zip包命名
zip文件以bundle名+版本号命名。
4 服务端配置后台设计
bundle包上传:上传文件命名=原文件名-文件md5.原后缀名。因此,相同文件会覆盖。上传文件后会生成一个下载地址。
上传信息:名称,版本号,bundle包
bundle信息记录到数据库:以名称和版本作为统一维度,如果存在记录则不允许插入。
表结构
name | version | url | md5 |
---|---|---|---|
varchar | int | varchar | varchar |
更新到前台(暂时直接使用mongoDB)
5 服务端前台设计
请求接口参数:name,version
请求接口缓存bundle列表(直接查mongoDB)
请求接口处理逻辑:根据bundle名查询最大版本,如果最大版本大于请求版本,则回应更新信息。
请求接口:
路径
api/bundle/update?name=xxx&version=xxx
回应数据格式
有更新信息
{
code: 0,
body: {
name: "",
version: "",
url: "",
md5: "",
}
}
无更新信息
{
code: -1
}