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

相关推荐
珍宝商店19 小时前
前端老旧项目全面性能优化指南与面试攻略
前端·面试·性能优化
bitbitDown19 小时前
四年前端分享给你的高效开发工具库
前端·javascript·vue.js
gnip20 小时前
实现AI对话光标跟随效果
前端·javascript
脑花儿20 小时前
ABAP SMW0下载Excel模板并填充&&剪切板方式粘贴
java·前端·数据库
lumi.1 天前
Vue.js 从入门到实践1:环境搭建、数据绑定与条件渲染
前端·javascript·vue.js
二十雨辰1 天前
vue核心原理实现
前端·javascript·vue.js
影子信息1 天前
[Vue warn]: Error in mounted hook: “ReferenceError: Jessibuca is not defined“
前端·javascript·vue.js
卷Java1 天前
CSS模板语法修复总结
java·前端·css·数据库·微信小程序·uni-app·springboot
gihigo19981 天前
在CentOS上配置SVN至Web目录的自动同步
前端·svn·centos
珍宝商店1 天前
优雅的 async/await 错误处理模式指南
开发语言·前端·javascript