从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差不多,远程得要有我们需要的Bundleapk文件,还要有一个版本记录文件version.json用来记录当前版本。

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

OTA更新时。

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

APK更新时

有更新类型和下载地址

version.json中的内容

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

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

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

下载后会长成这个样子。

何时使用Bundle文件

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

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

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

代码表示

使用样例

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

结语

感兴趣的可以去试试。

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

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

相关推荐
超哥--17 小时前
B站视频内容智能分析系统(九):React 前端与管理面板
前端·react.js·前端框架
Cutecat_20 小时前
视频字幕处理工具横向:提取模式 vs 编辑模式,该如何选择
android·前端·ios·语音识别
qq_4221525721 小时前
PDF 加水印工具怎么选?2026 年文档版权保护方案对比
前端·pdf·github
kyriewen21 小时前
手写 Promise.all、race、any:不到 30 行代码,解决并发异步的所有姿势
前端·javascript·面试
brucelee1861 天前
OpenClaw 浏览器控制(Chrome MCP)完整教程
前端·chrome
ct9781 天前
React 状态管理方案深度对比
开发语言·前端·react
胡志辉的博客1 天前
深入浅出理解浏览器事件循环:从一道输出题讲到 Chrome 源码
前端·javascript·chrome·chromium·event loop
代码不加糖1 天前
js中不会冒泡的事件有哪些?
前端·javascript·vue.js
懂懂tty1 天前
Vue2与Vue3之间API差异
前端·javascript·vue.js
AI焦点1 天前
跨越协议鸿沟:Tool Use状态机从Anthropic到OpenAI兼容体系的适配要点
前端·人工智能