从0到1搭建react-native自动更新(OTA和APK下载)

前言

如何实现RN自动更新,这是一个好问题,之前写electron时接触过electron-updater这个库,electron有这个库,那么RN应该也有差不多的库。试着找了一下,是的Expo有一个差不多的,但是不适用我们的项目。

那就自己写一个差不多的update库,反正原理都知道了。

先来看看效果

第2幅图为OTA更新时,第3和第4是apk更新。

后面有仓库地址

正文

OTA更新

OTA 的核心优势在于它能够绕过传统的更新流程。例如,在移动应用开发中,传统的更新方式是开发者发布新版本到应用商店,用户再从商店下载并安装完整的应用新版本。

而有了 OTA,开发者可以直接将更新后的代码(通常是脚本文件)和资源文件推送到用户设备上,用户在下次打开应用时,就可以直接应用这些更新,无需再次通过应用商店下载和安装。

在RN中的体现就是.bundle文件。这个Bundle文件实际上是一个JavaScript文件,它包含了应用的所有逻辑。当用户打开应用时,会加载并执行这个Bundle文件,从而渲染出界面并运行应用。

OTA 更新的本质就是 替换 这个 Bundle 文件。

APK更新

这个就简单了,安装apk安装包就可以了。

实现

打包相应文件到远程服务器

实现原理跟electron-updater差不多,远程得要有我们需要的Bundle和apk文件,还要有一个版本记录文件version.json用来记录当前版本。

所以远程地址的目录大致长这个样子

OTA更新时。

有更新类型和下载地址,这个zip文件解压出来就是Bundle文件

APK更新时

有更新类型和下载地址

version.json中的内容

为了更好的生成这些东西,也准备了打包的脚本。只要把生成的东西放到远程服务器上就可以了。

判断更新类型,资源下载到设备

在生成文件时,生成的updateType字段有两个值,一个是full,一个是apk_required。full时下载Bundle文件压缩包,然后解压;apk_required时下载apk安装就可以了。

下载后会长成这个样子。

何时使用Bundle文件

上面说了OTA 更新的本质就是 替换 这个 Bundle 文件。那我们什么时候替换,什么时候使用本身的呢?

我们在OTA更新时versionName值是不会变动的,只有我们安装apk时它才会变动。

我们在下载Bundle文件时,也将对应的版本记录下来了。那么我们就可以这样,记录的版本大于versionName时就替换。

代码表示

使用样例

如何使用这个库就更简单了,两个方法checkForUpdate检查更新,installUpdate安装更新。剩下的事,不用你管。

结语

感兴趣的可以去试试。

源码仓库: github.com/lzt-T/RNUpd...

样例:github.com/lzt-T/RNUpd...

相关推荐
锋行天下2 小时前
DeepSeek写Langgraph就是个大傻逼,一本正经胡说八道
前端·人工智能·后端
jktantan2 小时前
每个节点 41 字节:把一棵百万节点树拆进 14 个 typed array
前端·javascript·vue.js·算法·typescript
计算机魔术师3 小时前
Anthropic官方插件被「寄生」,背后是同一类攻击又来了
前端
我命由我123453 小时前
访客系统形式(有用户概念、无用户概念)
java·开发语言·前端·javascript·python·产品运营·产品经理
key_3_feng3 小时前
评估与对齐:Agent 自我进化的护栏
前端·数据库·agent
LaughingZhu4 小时前
Product Hunt 热榜 2026-10-30:Empacer、Scape、Floot in ChatGPT
java·前端·数据库·人工智能·chatgpt·notion
Lank_M4 小时前
抠图结果缩放后边缘发脏,该怪的不是插值
前端
jerrywus4 小时前
Skill、MCP、Workflow、Rules、Memory 有什么区别?拿几次真实开发任务讲清楚
前端·agent·claude
补码缩写4 小时前
canvas 与 sharp 缩放透明图:默认预乘,非预乘得拆通道
前端
静默回滚4 小时前
抠图 PNG 缩小再放大,边缘又糊又白是两件事
前端