native react 更新机制_React Native 热更新实现(客户端 + 服务器端)
1. 背景
目前,大家考虑使用React Native 技术的关键点主要有三个:
iOS和Android端可以使用统一的语言进行构建,并且部分组件代码可以实现共用
热更新能力,无需发布版本即可实现升级、bug修复等内容
体验接近原生 App
针对于第2点,MicroSoft CodePush.和React Native中文网 pushy都提供了相似的解决方案,其方案内容时将jsbundle的管理放置在了自己发服务器上,通过相关的js升级模块来检测升级并实现重新加载。然而,由于js代码本身就是源码的形式提供出去的,放到他人服务器上安全性难以保障;同时两者将热更新服务写在了js代码中,这意味着必须先加载了jsbundle,更新服务才能进行使用,那么为了安全,必须保障加载前的jsbundle是合法的、安全的。
基于以上两点的考虑,本项目抛弃了将更新服务器逻辑写在js代码中的实现方案,采用在Native层进行实现。
2. 项目地址
3. 功能特点
适合于将React Native用于某个子业务的场景,即由Native的页面事件调起整个React Native应用,如图;
实例
使用简单,在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);
使用laoding页面解决React Native加载前的白屏问题,等待加载完成再消除loading界面;
使用了common包 + n个业务小包的机制,减少了下载量,同时使用了bsdiff合成完整包时,完整包用完即删除,落脚地时间极短(可在一定程度上保护jsbundle文件,结合文件加密等措施可以更安全地保护文件)
服务器端代码,使用Node.js和Express框架构建。服务器将完整的jsbundle包拆分为一个公共包和一个业务包,拆分使用的是bsDiff算法,(可以自行替换成为google-diff-match-patch,两个算法的比较见https://github.com/MarcusMa/compare-file-diff-tools ),更加客户端返回的包的信息发送对应的升级包下载地址。
4. 使用方法
4.1 服务器
安装node.js,操作可百度或谷歌;
进入到本项目根目录,执行npm install;
如npm不能很好使用,请切换成cnpm;
在根目录下执行node index, 完成服务器启动;
若有要测试新的更新包,请将文件防止在public/original/business目录下,同时命名方式参照该目录下已有的文件格式,之后重启服务即可完成新包的发布。
4.2 Android客户端
//注意修改MMCodePush的访问地址,如下:
String mServerUrl = "http://172.20.143.41:8888";
codePush = new MMCodePush(this, mServerUrl, true);
若要测试新包的发布,请参考服务器的发布说明
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. 后续更新
可添加对jsbundle包的加密措施;
可添加预加载功能,提高加载时间;
native react 更新机制_React Native 热更新实现(客户端 + 服务器端)相关推荐
- native react 更新机制_React Native - 组件的生命周期详解(附:各阶段调用的方法)...
一个 React Native 组件从它被 React Native框架加载,到最终被 React Native 框架卸载,会经历一个完整的生命周期. 在这个生命周期中,我们可以定义一些生命周期函数, ...
- native react 常用指令_React Native入门基础篇(一)
学习一次,随处书写.(以下文字来自各大网上资料整理而来,侵删!) 概述 使用React为Android和iOS创建本机应用 React Native将本机开发的最佳部分与React(用于构建用户界面的 ...
- native react 折线图_react native中使用echarts
开发平台:mac pro node版本:v8.11.2 npm版本:6.4.1 react-native版本:0.57.8 native-echarts版本:^0.5.0 目标平台:android端收 ...
- native react 常用指令_React Native 常用的 15 个库
点赞再看,养成习惯 本文 GitHub https://github.com/qq44924588... 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料.欢迎Star和完善,大家 ...
- native react 常用指令_React Native 常用命令或快捷键合集
命令: react-native init "项目名称" : 运行React Native的初始化命令,创建一个项目 npm install : 需要在工程目录下用此命令将依赖包下 ...
- native react 图片裁剪_react native 头像上传 react-native-image-crop-picker
之前用的是react-native-image-picker,但是当往服务器端传的时候才发现,因为没有图片裁切,所以图片过大,无法保存,所以只好更换成react-native-image-crop-p ...
- Android热更新初探,Bugly热更新的集成和使用(让你的应用轻松具备热更新能力)
介绍 在介绍Bugly之前,需要先向大家简单介绍下一些热更新的相关内容.当前市面的热补丁方案有很多,其中比较出名的有阿里的AndFix.美团的Robust以及QZone的超级补丁方案.但它们都存在 ...
- springboot基于Elasticsearch6.x版本进行ES同义词、停用词(停止词)插件配置,远程词典热加载及数据库词典热加载总结,es停用词热更新,es同义词热更新
前言:ES版本差异较大,建议跨版本的同学,可以先了解一下版本区别,建议不要跨版本使用插件或者进行项目调试. 本总结主要基于6.x版本的6.5.1(6.2.2实测可用),分词器为IK,下载地址:http ...
- React Native带你一步步实现热更新(CodePush-Android)
前言:无奈研究了一下CodePush,遇到了很多坑-- 但是原理呢不是很难理解,就是配置有点多,原理可以简单的参考一下我之前的一篇博客React-Native 热更新尝试(Android),下面说一下 ...
最新文章
- Eclipse中怎样使用ERMaster进行单表设计并导出为DDL
- 请求数据分析 xpath语法 与lxml库
- 都江堰很美-佩服古人_Crmhf的一天
- 推荐12款非常有用的流行 jQuery 插件
- 【重磅快讯】T11 2019数据智能技术峰会举办,AI将成为行业颠覆者
- maven 插件深入了解
- 全国所有火车站站点信息
- 物联网定位系统:GPS、WiFi、基站、RFID…
- Entertain Box multiset的应用
- 2022-2027年(新版)中国大米行业营销战略与供应情况预测报告
- Android按键音
- 【加装固态硬盘】联想小新Air15-IKBR 2018款加装固态硬盘教程
- php为什么被叫做拍黄片 故事起因
- 最完整Android Studio插件整理
- Java Json和yaml转换
- netty客户端连接后无限发送数据,连接不上时无限重试,断线重连
- 将tomcat注册为Windows服务
- 《坚持,一种可以养成的习惯》读书笔记
- 8种常见的大数据分析模型
- Premiere模板插件预设 1300个摄像机缩放平移扭曲旋转图形干扰炫光水墨婚礼体育vlog视频转场