记react-native热更新开发实践

553 阅读4分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第2天,点击查看活动详情

公司一款内部使用的app,使用react-native开发,也提交App Store审核了,因为是内部使用的,没有对外的下载,走的苹果的另一种分发模式-商务管理模式,具体的App Store上架操作可以参考这篇文章 记一次苹果商务管理模式分发实践

采用的混合开发,「一次编写,双端使用」,虽说有点夸张,不过开发起来是比原生的快了,且人手省了。对我们而言,内部的一款app,经常会有些需求的变动,如果每次都走App Store审核,响应方面没那么快,所以我们采用了热更新的方式,一般不牵扯到原生的代码,我们都会选择热更新的方式,贴上热更新的文档地址。 react-native中文网推荐的热更新

安装配置

安装配置方面跟着文档走就行,RN 版本 >= 0.60不需要手动link,配置 Bundle URL,改改原生代码,这一步下来还是挺方便的。然后需要在热更新官网上注册账户,创建应用,android和iOS平台各创建一个应用,在项目里 pushy selectApp,选择对应的app,会生成update.json文件,包含对应的appId和appKey,检查更新时匹配使用的。

代码集成

文档里v7版本提供了快速集成的方式,一般情况会选择自定义集成,根据自己的实际场景来使用。这里主要讲常用的几个方法。

获取 appKey,上面安装配置时生成的update.json文件,引用获取到对应的appKey.

import { Platform } from 'react-native';

import _updateConfig from './update.json';
const { appKey } = _updateConfig[Platform.OS];

首先检查更新,checkUpdate(appKey)方法,传参appKey,检查当前的版本是否需要更新,异步操作,返回值info有三种情况:

1.{expired: true} 应用原生包已过期。
2.{upToDate: true} 当前是最新的,不需要更新。
3.{update: true} 有新版本可以热更新,主要是针对这种情况进行判断,其中metaInfo字段可以自定义需求是静默更新或者强制更新,很实用。metaInfo信息的配置在上传热更新的时候定义,这里拿到的是字符串,可以JSON格式化处理。

调用downloadUpdate来进行下载更新,异步方法,返回值是一个hash字符串,标识当前热更新的版本。

下载完,使用switchVersion(hash)应用重新进行加载,或者switchVersionLater(hash)下次启动的时候加载。这里,我们是通过metaInfo里去判断静默还是强制更新,{"silent":true} 为静默更新,用户无感知,如果是强制更新则会有个弹窗提示,重新应用生效,调用的就是switchVersionLater

还有一点就是每次更新完毕后的首次启动,官方称为反触发机制,在应用退出前合适的任何时机,调用markSuccess

  componentDidMount() {
    if (isFirstTime) {
      // 必须调用此更新成功标记方法
      // 否则默认更新失败,下一次启动会自动回滚
      markSuccess();
      console.log('更新完成');
    } else if (isRolledBack) {
      console.log('刚刚更新失败了,版本被回滚.');
    }
  }

代码方面的基本就是如此,官方有相应的完整示例,我们需要按照自己的实际情况进行修改,接下来就是发布热更新了。

发布热更新

首先就是打包,iOS导出ipa包,android的是apk,命令行上传pushy 服务

ios:  
pushy uploadIpa <ipa包>

android:    
pushy uploadApk <android包>

后面发布的js热更新就是基于这些版本更新。修改js文件,准备热更新。

$ pushy bundle --platform ios //最后的代表不同平台,安卓对应android
<各种进度输出>
Would you like to publish it?(Y/N) y //输入y确定要上传
Uploading [========================================================] 100% 0.0s
Enter version name: <输入热更新版本名字>
Enter description: <输入热更新版本描述>
Enter meta info: {"silent":true} //这里就是上文提到metaInfo
Ok.
Would you like to bind packages to this version?(Y/N) y //y是立即绑定,会让你选择你之前传的app应用包,n的不绑定,可以后面去网站上进行手动绑定。

至此,发布完成,可以进行测试,直接安装原生的apk包,然后热更新下,第一次打开app,下载热更新,关闭,第二次打开加载生效。

一般静默更新,用户无感知,如果需要通知到用户,建议有提示弹窗,因为告诉用户去打开两次,对方不一定懂,特别是你说要完全关掉app或者杀掉进程,群体不一样,他们不一定懂,当然如果理解为关机重启,热更新也是可以生效的。还有一种方式,是监听从后台切换到前台的事件,在那里面加逻辑,可以实现从后台切换到前台,应用重启,热更新生效。