作者 | 钱凯
杏仁移动开发工程师,前嵌入式工程师,关注大前端技术新潮流。
本文使用的环境:
React@16.3.1
React Native@0.55.4
react-native-code-push@5.3.4
Android SDK@23
Android Build Tool@23.0.3
Gradle@2.14.1
Android Gradle Plugin@2.2.3
Why CodePush?
CodePush 是微软提供的一个热更新前后台方案,它对 React Native 项目有很好的支持。
目前针对 React Native 的 hot update 方案有许多,但是 CodePush 是最成熟稳定的方案,它最大的特点是提供了完整的后台工具。它主要的优点是:
微软出品,大厂保证
良好的多环境支持(Testing,Staging, Production)
灰度发布、自动回滚等等特性
良好的数据统计支持:下载、安装、出错一目了然
强大的 CLI 工具,一个终端搞定全部流程
由于 React Native 执行的是脚本 js 文件,对热更新有天然的亲和,有余力的团队可以尝试实现自己的框架,一个简单的实现思路是:
修改加载
jsBundle
的代码,转而从指定的本地存储位置去加载。如果没有,下载 bundle, 并且本次打开使用 app 包中的 bundle。如果找到
jsBundle
文件,调用 api 比较版本号,如果不一致,则从指定服务器下载最新的 bundle 进行替换。通过反射调用私有方法,在下载完成的回调中更新运行时资源,从而能立即看到更新的效果。
使用类似
google-diff-match-patch
的 diff 工具,生成差异化补丁,不必下载完整 bundle,从而大大减小补丁包体积。
网上有很多资料和源码,这里就不细述了。
后台配置
为了使用 Code Push 发布热更新,我们需要向微软服务注册我们的应用。这部分工作微软提供了强大的命令行工具:CodePush CLI
。
安装 cli 工具
npm 全局安装:
npm install -g code-push-cli
关联账号
使用命令
code-push register
注册一个账号,可以直接使用 GitHub 账号授权,完成后将 token 复制回命令行中。
使用 whoami
查看登录状态:
code-push whoami
注册应用
登录成功后,我们注册一个app:
code-push app add 你的App名称 android react-native
注意一定要为 Android 和 iOS 分别注册,两者的更新包内容会有差异。
查询状态
每个 App 有不同的运行时环境,比如 Production
,Staging
等,我们也可以配置自己的环境。查看 App 的不同环境和部署状况:
code-push deployment ls 注册的app名称
目前我们还没有发布任何更新,所以表中的状态是空的。
到这里就完成了后端的基本配置。
App端配置
版本兼容
安装 Code Push 环境前首先要 check 版本的兼容性问题,不同的RN版本需要使用不同的 Code Push,原则上我们建议将 RN 和 CodePush 都升级到最新版本。