从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...

相关推荐
weixin_382395234 小时前
为小工厂量身打造:本地部署的物料管理系统带缺料计算
前端·制造
__zRainy__4 小时前
解决pnpm v10+不自动构建
前端·pnpm·工程化
猫猫不是喵喵.5 小时前
Vue3 Props 属性
前端·javascript·vue.js
醉城夜风~6 小时前
CSS元素显示模式(display)
前端·css
AI大模型-小华6 小时前
Codex 三方充值快速入门指南
java·前端·数据库·chatgpt·ai编程·codex·chatgpt pro
做前端的娜娜子9 小时前
同一链接实现 PC Web 与移动 H5 自适应
前端·掘金·金石计划
小帅不太帅9 小时前
架构没变、规模没变,DeepSeek V4 Flash 正式版凭什么暴涨 47 分?
前端·aigc·deepseek
jarvisuni9 小时前
DeepSeekFlash前端依旧拉垮,而且变慢了很多!
前端·javascript·算法
卷福同学11 小时前
AI编程出海第二步:验证关键词能否做站
前端·人工智能·后端