React Native 热更新实现(客户端 + 服务器端)



  • 1. 背景

    目前,大家考虑使用React Native 技术的关键点主要有三个:

    1. iOS和Android端可以使用统一的语言进行构建,并且部分组件代码可以实现共用
    2. 热更新能力,无需发布版本即可实现升级、bug修复等内容
    3. 体验接近原生 App

    针对于第2点,MicroSoft CodePush.和React Native中文网 pushy都提供了相似的解决方案,其方案内容时将jsbundle的管理放置在了自己发服务器上,通过相关的js升级模块来检测升级并实现重新加载。然而,由于js代码本身就是源码的形式提供出去的,放到他人服务器上安全性难以保障;同时两者将热更新服务写在了js代码中,这意味着必须先加载了jsbundle,更新服务才能进行使用,那么为了安全,必须保障加载前的jsbundle是合法的、安全的。
    基于以上两点的考虑,本项目抛弃了将更新服务器逻辑写在js代码中的实现方案,采用在Native层进行实现。

    2. 项目地址

    Android 客户端:https://github.com/MarcusMa/simple-react-native-hot-code-push
    服务器端:https://github.com/MarcusMa/simple-react-native-hot-code-push-server

    3. 功能特点

    1. 适合于将React Native用于某个子业务的场景,即由Native的页面事件调起整个React Native应用,如图;
      实例

    2. 使用简单,在Native页面的适合时机调用MMCodePush.checkForUpdate(...)即可完成更新检查和下载任务,启动React Native时会自动检查是否下载完成等内容,Native只需要将业务id通过Intent传给MMBaseActivity即可;

    Intent intent = new Intent(mContext, DemoRNActivity.class);
    intent.putExtra(MMCodePushConstants.KEY_BUSINESS_ID, "AAF047B7-E816-2AE0-949A-D5FB4CE40245");
    mContext.startActivity(intent);
    
    1. 使用laoding页面解决React Native加载前的白屏问题,等待加载完成再消除loading界面;
    2. 使用了common包 + n个业务小包的机制,减少了下载量,同时使用了bsdiff合成完整包时,完整包用完即删除,落脚地时间极短(可在一定程度上保护jsbundle文件,结合文件加密等措施可以更安全地保护文件)
    3. 服务器端代码,使用Node.js和Express框架构建。服务器将完整的jsbundle包拆分为一个公共包和一个业务包,拆分使用的是bsDiff算法,(可以自行替换成为google-diff-match-patch,两个算法的比较见https://github.com/MarcusMa/compare-file-diff-tools ),更加客户端返回的包的信息发送对应的升级包下载地址。

    4. 使用方法

    4.1 服务器

    1. 安装node.js,操作可百度或谷歌;
    2. 进入到本项目根目录,执行npm install;

    npm不能很好使用,请切换成cnpm;

    1. 在根目录下执行node index, 完成服务器启动;
    2. 若有要测试新的更新包,请将文件防止在public/original/business目录下,同时命名方式参照该目录下已有的文件格式,之后重启服务即可完成新包的发布。

    4.2 Android客户端

    1. 先启动服务器,地址 https://github.com/MarcusMa/simple-react-native-hot-code-push-server
    2. 使用 android studio 导入项目中的android工程,编译运行;
    //注意修改MMCodePush的访问地址,如下:
    String mServerUrl = "http://172.20.143.41:8888";
    codePush = new MMCodePush(this, mServerUrl, true);
    
    1. 若要测试新包的发布,请参考服务器的发布说明

    5. 接口说明

    /checkForUpdate 检查jsbundle是否有更新接口

    • 接口请求示例
    {
        businessList:[
            {
                id:"AAF047B7-E816-2AE0-949A-D5FB4CE40245"
                hashcode:"01824139386045ca6739dd52b3bfb74a76b9b99fefb336f4e1a147a182cad6ba"
            }
        ]
    }
    
    • 接口返回示例
    {
        success: 1,
        msg: "成功"
        data: [{
                id: "AAF047B7-E816-2AE0-949A-D5FB4CE40245", // 验证通过且有升级包的情况
                verifyHashCode: "01824139386045ca6739dd52b3bfb74a76b9b99fefb336f4e1a147a182cad6ba",
                latestPatch: {
                    hashCode: "c1bbdc02200b5e5a72cf97bbdc3339165e71182c61f",
                    downloadUrl: "http://download.marcusma.com/rn/marcusma.patch",
                }
            }
        ]
    }
    

    6. 后续更新

    1. 可添加对jsbundle包的加密措施;
    2. 可添加预加载功能,提高加载时间;

登录后回复