一：加载服务端js文件，更新页面（方案不可行）
-
React-Native的文件系统，在Metro打包时，就已经决定了其路径，绝对路径或相对路径无法更改。
-
iOS下载时，下载到本地的js，与react-native文件系统不一致。
-
因此，当iOS下载好文件后，去替换react-native里js的内容或者动态导入刚下载的js不成立。
-
报错如下：
[图片上传失败...(image-3d801e-1730692336318)]
无法导入变量式路径（下载地址）js
[图片上传失败...(image-f6f0b2-1730692336318)]
无法导入iOS文件系统下的js
[图片上传失败...(image-cbd52e-1730692336318)]
直接val加载内容，以上说明不是标准js文件，无法解析和加载
[图片上传失败...(image-6e0283-1730692336318)]
解析成标准的js内容后，无法加载import
[图片上传失败...(image-a74f0d-1730692336317)]
无法使用exports导出模块
[图片上传失败...(image-7407a2-1730692336317)]
无法使用global导出模块
二：使用codepush热更新
问题：这里核心问题jsBundle文件过大，导致用户热更新可能失败？
因此，直接采用增量更新，可以通过diff算法，对比hash值更新，从而解决这个问题。
- 查看官网，发现，这个增量更新已经集成在codepush了
The CodePush client supports differential updates, so even though you are releasing your JS bundle and assets on every update, your end users will only actually download the files they need. The service handles this automatically so that you can focus on creating awesome apps and we can worry about optimizing end user downloads.
[图片上传失败...(image-1ed71c-1730692336317)]
ps: https://github.com/microsoft/react-native-code-push?tab=readme-ov-file#how-does-it-work
- 查看codepush历史下载记录，发现确实存在差异更新数据
[图片上传失败...(image-45fa23-1730692336317)]
- 但在真实检测更新时，发现获取到的包大小，依旧是"全量包"（3.75MB左右，实际上，我只修改了一行代码）
[图片上传失败...(image-1a82b8-1730692336317)]
[图片上传失败...(image-bb1e86-1730692336317)]
- 对比两文件(bundle)的差异
[图片上传失败...(image-a526cb-1730692336317)]
这个输出表示在两个文件中，第一个文件的第 1688 行被更改为第二个文件的第 1688 行。
也就是说，文件修改确实只有一个地方，确实是存在细微差异
- 最后发现：
确实是下载的增量包，根据查看发布记录生成的数据（下图），对比下载数据（package_size，如上图）可知
[图片上传失败...(image-32eac0-1730692336317)]
- 但依旧增量更新也有3-4MB，暂无法得知，github作者也无解释
https://github.com/microsoft/react-native-code-push/issues/2564
三：本地服务器（本机当服务器）配置（测试）
由于机器配置、环境不一样，下面只能做参考（可直接点击下面参考链接，步骤更详细）
- 安装mysql是8.0版本，使用旧的加密方式，否则报错：
Client does not support authentication protocol requested by server; consider upgrading MySQL client
- 启动code push服务器，获取token时
启动服务器：./bin/www
看到报错不要管，直接登录
admin 123456(默认)
- 输入终端，登录code push
[图片上传失败...(image-56456f-1730692336317)]
- 创建app，获取Deployment Key
code-push app add hotRefresh ios react-native // hotRefresh包名
- app原生配置codepush
https://github.com/lisong/code-push-server/blob/master/docs/react-native-code-push.md
- 打js或ts包
react-native bundle --platform ios --entry-file index.js --bundle-output ./bundles/main.jsbundle --assets-dest ./bundles --dev false（注意index文件是js还是ts，同时，bundles文件夹要提前创建）
- 推包
code-push release-react sunoAi iOS -o ./bundle --t 3.2.5 --d Staging（Staging是环境，3.2.5是版本, sunoAI是应用名）
- token输入后报错，downloadUrl由于切换ip后，导致，需要重新输入正确ip
[图片上传失败...(image-3ef36c-1730692336317)]
参考链接：
iOS原生配置：https://github.com/lisong/code-push-server/blob/master/docs/react-native-code-push.md
四：远程服务器（真实服务器）配置（生产）
参考同上
五：demo
注意目前codepush的版本："react-native-code-push": "^8.3.0"（最新版9.0.0，需要iOS版本最低15，具体看下面参考链接找）
iOS原生配置：
在info.plist位置添加如下：
<key>CodePushDeploymentKey</key>
<string>S0eeIuMjkGg7UysCDvjhsAV3vDut4ksvOXqog</string> // 上述配置获取的key
<key>CodePushServerURL</key>
<string>http://192.168.2.177:3000/</string>// 服务器地址
iOS代码：
在AppDelegate.m
#import <CodePush/CodePush.h>
(NSURL *)bundleURL
{
#if DEBUG
return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@".expo/.virtual-metro-entry"];
#else
// return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
return [CodePush bundleURL]; // 此处添加
#endif
}
react-native代码：
// 使用 CodePush 高阶组件包装你的主应用组件。
import CodePush from 'react-native-code-push';
const App = () => {
return (
<View style={styles.content}>
<Text>asdfasdfsadfasdfsadfs</Text>
<Text>asdfasdfsadfasdfsadfs</Text>
<Text>asdfasdfsadfasdfsadfs</Text>
<Text>asdfasdfsadfasdfsadfs</Text>
<Text>asdfasdfsadfasdfsadfs</Text>
<Text>asdfasdfsadfasdfsadfs</Text>
<Text>asdfasdfsadfasdfsadfs</Text>
<Text>asdfasdfsadfasdfsadfs</Text>
</View>
)
}
const codePushOptions = {
//设置检查更新的频率
//ON_APP_RESUME APP恢复到前台的时候
//ON_APP_START APP开启的时候
//MANUAL 手动检查
checkFrequency: CodePush.CheckFrequency.ON_APP_START,
// installMode: CodePush.InstallMode.IMMEDIATE, // 更新下载完成后立即安装
}
export default CodePush(codePushOptions)(App)
打bundle包
// hotRefresh包名
// ./bundles 当前文件夹下的bundles文件夹（需要自己创建）
react-native bundle --platform ios --entry-file index.js --bundle-output ./bundles/main.jsbundle --assets-dest ./bundles --dev false
发布
// hotRefresh包名
code-push release-react hotRefresh iOS -o ./bundle --t 1.0.0 --d Staging
代码：
暂时无法在飞书文档外展示此内容
视频：
Musent——test分支
-
手动更新
-
app启动时，下载bundle文件；下次打开时，采用最新的bundle文件
-
app启动时，下载bundle文件；下载完成，立即采用最新的bundle文件
具体参考：
https://github.com/lisong/code-push-server/blob/master/docs/react-native-code-push.md
六：指定发布
-
使用--targetBinaryVersion可进行指定版本发布（不可控）
// 单一版本 // 指定只有1.2.0版本的应用才能获取到此更新 code-push release-react maxxhealth(应用名) Staging（环境名） --targetBinaryVersion "1.2.0"（版本号）// 版本范围 // 只有在版本 1.2.0（含）到 1.4.0（不含）之间的应用都能接收该更新 code-push release-react maxxhealth Staging --targetBinaryVersion ">=1.0.0 <1.4.0"// 通配符 // 所有 1.0.x 版本的应用都能接收该更新。 // 所有 1.x.x 版本的应用都能接收该更新。 code-push release-react maxxhealth Staging --targetBinaryVersion "1.0.*" code-push release-react maxxhealth Staging --targetBinaryVersion "1.*.*" -
可以将更新推送给部分用户，比如推送50%，推送达100%，说明完全推送（随机）
code-push release-react maxxhealth Staging --rollout 50
code-push release-react maxxhealth Staging --rollout 100
推送错误，可回滚至正确的版本
code-push rollback maxxhealth Staging
仅能回滚到上一个版本，并不能指定版本，指定版本，不如重新发布bundle文件
- 可以使用不同的秘钥，来控制不同的版本推送（可控）
[图片上传失败...(image-915caa-1730692336317)]
如上图，目前有3个应用，每个应用都有对应的部署环境，目前是默认（Staging测试、Production生产）
假如目前有3个版本需要推送不同的订阅页，那么就创建3个不同的部署环境
[图片上传失败...(image-940ad2-1730692336317)]
code-push deployment add hotRefresh Production_A
code-push deployment add hotRefresh Production_B
code-push deployment add hotRefresh Production_C
[图片上传失败...(image-53bede-1730692336317)]
如此，就有了3个key，对应3个不同的线上环境
这样，就可以在每个对应的key上，推送不同的更新，客户端也可以根据不同的key，获取到指定的bundle文件
// 获取指定的key
const codePushDeploymentKey = getUserDeploymentKey(); // 根据逻辑动态获取密钥CodePush.sync({ deploymentKey: codePushDeploymentKey });
// 此处key不会与info.plist文件的CodePushDeploymentKey冲突
Info.plist 中的 CodePushDeploymentKey：这是应用程序在未显式指定 deploymentKey 参数时使用的默认部署密钥。
CodePush.sync() 中的 deploymentKey 参数：这是在调用 CodePush.sync() 方法时，手动指定的部署密钥。如果设置了该参数，会优先使用它，而忽略 Info.plist 中的密钥。
网友评论