ReactNative 增量热更新思路

增量热更新

ReactNative 增量更新

ReactNative 增量更新的内容包含 JS 和图片,在每次应用启动的时候请求服务器更新。
增量更新设计到版本号的管理,版本号存储位置有两个,一个是应用打包的只读目录,另一个是沙盒目录。

版本概念:

基线版本:

App 使用的最新的JS版本。 此 JS 版本号是初始化打包进 App 的,当 Native 代码升级的时候用户需要到市场升级。iOS 可以在 plist 文件加入一个Key 来存储。

当前版本:

JS 在 App 内每次在线更新升级到的版本号。

升级的思路是需要拿着本地的 JS 版本号,向服务器请求最新版本。

本地的 JS 版本号有以下几种状态:

  1. 第一次发布带有升级程序的 ReactNative 的App,“基线版本”为 0,“当前版本”为null,此时需要用“基线版本”号向服务器发送请求。
  2. 日常的 JS 升级,以”当前版本“号递增,从服务器获取最新版本。
  3. 需要发布到市场一次大版本,“当前版本” 例如为2.0,在打包的时候 “基线版本号” 一定是最大的,除非在发布新包的时候忘记升级 ”基线版本“,”基线版本“ 假如为3.0,JS 升级需要拿”基线版本“ 发送请求。为保险起见取 MAX(”基线版本“,"当前版本") 发送请求。

升级原理

JS增量

JS增量包生成使用BSDiff。
安卓和iOS使用BSPatch合并补丁,并导出合并方法给JS调用。

图片增量

图片升级使用git diff 命令找到上版本和当前版本中变化的图片,生成图片增量包。

原理是 ReactNative 会自动找打包命令生成的大 bundle 文件 所在的目录下的图片,所以只要保证我们全量图片和Bundle文件在一起,且严格按照以下的目录放置即可找到。

iOS图片必须有根目录 asset ,下面的图片按照模块文件名划分,asset和 bundle 文件是同级目录。。

安卓图片目录没有asset,四个文件夹 drawable-hdpi,drawable-mdpi,drawable-xhdpi,drawable-xxxhdpi 并列,和bundle文件是同级目录。

增量图片和JS补丁打成一个ZIP文件,下载到对应版本的目录后,首先把上个版本的图片和JS拷贝过来,然后解压,合并JS,覆盖图片。

最终实现的效果是:升级的每个版本都在沙盒中生成一个目录,包含 全量JS 全量图片,如果怕图片过多,可以只保留三个版本,每次升级把旧的版本删除。
回滚:如果升级后,程序启动闪退,且次数过多,需要执行自动回滚,沙盒中保存的历史版本就发挥作用了。只需要把当前版本号更改到上一个版本,让系统找到旧版本的main.jsbundle 就会回滚。

API设计

原生需要暴露给JS使用的类 XSYUpgradeManager
提供方法

  1. baseVersion 基线版本
  2. currentVersion 当前版本
  3. setVersion(version) 设置版本
  4. versionDesc(source,target) 版本比较,返回bool值
  5. combine(patchPath,newVersion,callback) bsdiff合并

其他相关类:

  1. XSYPatchCombine
combineIndexBundle
参数:
patchPath (String) 补丁目录
newVersion (String) 新版本号
completionHandler(combineResult)   合并之后的回调方法
  1. XSYJSVersion
setVersion 设置当前版本为升级后的版本
参数:
version (String) 新版本号
getBaseVersion 获取基线版本,意为打包时候的当前最新JS版本
getCurrentVersion 获取当前JS版本,用此方法得到的版本号请求服务器最新版本。
versionDesc 比较版本大小,返回BOOL
参数:
source(String)
target(String)
currentVersionBundleURL 获取当前JS版本的bundle路径
参数:
version(String)

JS代码更新

生成增量包

iOS:
react-native bundle --entry-file index.ios.js --bundle-output ./bundle/index.ios.jsbundle --platform ios --assets-dest ./bundle --dev false --minify true

Android:
react-native bundle --entry-file index.android.js --bundle-output ./bundle/index.android.jsbundle --platform android --assets-dest ./bundle --dev false

--entry-file 输入文件
--platform 平台语言
--dev 开发模式
--minify 压缩JS
--bundle-output 输出文件名

注意:如果Xcode直接运行打包,即便设置成--dev 为false
选择Release运行的时候Xcode 会自动执行此命令。

图片更新

1.服务器生成增量包
2.手机端下载增量包
3.手机端拷贝上版本所有图片到新版本目录
4.手机端合并增量图片为全量图片

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,362评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,330评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,247评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,560评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,580评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,569评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,929评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,587评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,840评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,366评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,945评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2 342

推荐阅读更多精彩内容