目錄
- 前言
- API
-
- 常數
- 方法
- 監聽
- 準備工作
-
- Native中的全局配置
- 如何打包
- Bundle内容
- 使用
-
- 自動更新
- 手動更新
- 彩蛋
- 深坑預警
前言
沒想到expo能把熱更新做的如此簡單易用。曾經想看源碼學習研究一下，結果铩羽而歸。後續就想着把碰到的一些坑及官方文檔上遺漏的一些點給補充上去
API
常數
-
Updates.isEmergencyLaunch
-
Updates.manifest
-
Updates.releaseChannel
-
Updates.updateId
方法
-
Updates.checkForUpdateAsync(): Promise<UpdateCheckResult>
commitTime
// UpdateCheckResult類型 type UpdateCheckResult = { isAvailable: false; } | { isAvailable: true; manifest: Manifest; // 跟上面提到的Updates.manifest一緻 }; -
Updates.fetchUpdateAsync(): Promise<UpdateFetchResult>
- 将最新bundle下載下傳到本地，iOS/Android都是内置資料庫來管理Bundle。
isNew
- 在Native端Bundle的下載下傳沒有主動設定逾時時間(iOS預設是60s)。若網絡狀态不好，會等待好長時間，是以建議通過
Promise.race
// UpdateFetchResult類型 type UpdateFetchResult = { isNew: false; } | { isNew: true; manifest: Manifest; }; -
Updates.reloadAsync()
commitTime
最大的Bundle，并加載
切記：不要在該方法後加任何的邏輯，是以該方法開始執行就代表着本bundle的終結。
監聽
-
Updates.addListener(eventListener)
- 監聽熱更新的結果，沒有進度隻有結果。要取消監聽調用傳回值的remove方法即可
- 其實該方法比較雞肋，在android端隻有開啟
EXUpdatesCheckOnLaunch
fetchUpdateAsync
// eventListener參數type type UpdateEvent = { type: UpdateEventType.NO_UPDATE_AVAILABLE; } | { type: UpdateEventType.UPDATE_AVAILABLE; manifest: Manifest; } | { type: UpdateEventType.ERROR; message: string; };
準備工作
expo-updates的API也就這些，十分簡易明。接下我就跟大家聊聊一些配置問題
備注：如下配置是基于expo建立的bare項目，與其他方式建立下的RN項目在使用方式上可能會有些出入。
Native中的全局配置
若正常安裝了expo-updates庫，在iOS項目下會有如下一個配置檔案
在android的AndroidManifest.xml裡也有同樣的配置
不管是iOS還是Android關于熱更新的配置檔案都有如下四個字段：
-
EXUpdatesCheckOnLaunch
EXPO_UPDATES_CHECK_ON_LAUNCH
- 上訴提到的checkForUpdateAsync僅僅會判定是否有可用的熱更新，而這個字段一但開啟會在啟動時自動檢查和下載下傳(有的話)新Bundle。但需要重新開機才會加載新Bundle。
- 開啟這個其實就在殼子裡自動完成了熱更新，RN層不需要寫任何的監聽代碼。至于監聽就看自己的業務需要了。
- 該字段有共有三個值：ALWAYS/NEVER/WIFI_ONLY
-
EXUpdatesEnabled
ENABLED
：default: true
禁用的話不僅僅是讓第一個字段失效，也不能調用上訴提到的熱更新API，會強制應用加載打包到ipa/apk中的Bundle檔案
-
EXUpdatesLaunchWaitMs
EXPO_UPDATES_LAUNCH_WAIT_MS
: default: 0，機關是毫秒
等待Native熱更新的時間，配合SplashScreen使等待時間螢幕上一直顯示啟動頁。下載下傳完之後并不會直接加載新Bundle，而是加載之前的可用版本
-
EXUpdatesSDKVersion
EXPO_SDK_VERSION
-
EXUpdatesURL
EXPO_UPDATE_URL
https://xxx/ios-index.json
如何打包
若使用expo-updates便不可以直接使用
react-native bundle
的打包方式，需按照如下方式：
# android/iOS兩個平台會同時打出
expo export -p https://xxxx/xxx --output-dir ./dist --config app.json --force
expo expor
更多的指令，有興趣的小夥伴檢視expo-腳本翻譯。接下來分析一下這裡用到的每個參數：
- -p: 打包結束以後，會自動将Native中的
EXUpdatesURL
EXPO_UPDATE_URL
修改成指定内容。
舉個🌰：-p: 指定的是https://juzi.com/juzi，則Native中的熱更新位址分别為：
iOS: https://juzi.com/juzi/ios-index.json
android: https://juzi.com/juzi/android-index.json
- –output-dir：打包産物的輸出路徑
- –config：指定expo項目的配置檔案，在expo的bare項目中，這個檔案好像沒啥用
- –force：強制覆寫之前output-dir的檔案
在上訴指令裡面需要我們注意的是，需要我們自己想辦法把
output-dir
中的檔案給轉移到
-p
下指定路徑
Bundle内容
在
-p
裡面我們提到了ios-index.json及android-index.json，接下來我們主要介紹下
expo export
的産物。首先看看目錄結構
.
├── android-index.json
├── ios-index.json
├── assets
│ └── 1eccbc4c41d49fd81840aef3eaabe862
└── bundles
├── android-01ee6e3ab3e8c16a4d926c91808d5320.js
└── ios-ee8206cc754d3f7aa9123b7f909d94ea.js
要特别說明的是index.json，這其實是
package.json
/
app.json
/
manifest
三個檔案的集合，給大家粘一個自己體會一下
{
"name": "xxxx",
"slug": "xxxx",
"version": "1.0.0",
"orientation": "portrait",
"icon": "./src/assets/images/icon.png",
"scheme": "myapp",
"userInterfaceStyle": "automatic",
"updates": {
"fallbackToCacheTimeout": 0
},
"ios": {
"supportsTablet": true,
"bundleIdentifier": "com.kaikeba.lumiere.xiaochao"
},
"web": {
"favicon": "./assets/images/favicon.png"
},
"android": {
"package": "com.kaikeba.lumiere.xiaochao"
},
"entryPoint": "node_modules/expo/AppEntry.js",
"sdkVersion": "38.0.0",
"platforms": [
"ios",
"android",
"web"
],
"locales": {},
"iconUrl": "https://www.xxxx.com/assets/2f893d5432f4c59aff316878db740f41",
"bundledAssets": [
"asset_7d40544b395c5949f4646f5e150fe020.png",
"asset_647543ebfccf6e5495434383598453d1.json",
"asset_5cdf883b18a5651a29a4d1ef276d2457.ttf",
],
"assetUrlOverride": "./assets",
"publishedTime": "2020-10-20T07:10:42.731Z",
"commitTime": "2020-10-20T07:10:42.732Z",
"releaseId": "308a52d0-88c1-43fd-bd8e-5bea37c4d845",
"revisionId": "ZJQjABE6Pz",
"id": "@xxxx/xxxx",
"bundleUrl": "https://www.xxxx.com/bundles/ios-107355c4860396020a50cc99c1e16578.js",
"platform": "ios",
"dependencies": [
"@ant-design/icons-react-native",
"@ant-design/react-native",
"@expo/vector-icons",
"@react-native-community/async-storage",
]
}
使用
自動更新
分兩種：
-
啟動下載下傳，但不Rload最新的Bundle，再次冷啟動會加載最新的Bunlde
搞好Native配置即可。RN代碼中不需要調用任何熱更新API
-
需要啟動自動加載最新的Bundle
除了搞好Native配置外，要在Bundle初始化時調用
Updates.addListener
Updates.reloadAsync()
手動更新
手動更新要将
EXUpdatesCheckOnLaunch
設為
NEVER
，其他按需配置即可，附上RN層的邏輯代碼
try {
const update = await Updates.checkForUpdateAsync();
if (!update.isAvailable) {
this.jumpLogic();
return;
}
const result = await Updates.fetchUpdateAsync();
if (result.isNew) {
await Updates.reloadAsync();
return;
}
this.jumpLogic();
} catch(err) {
this.jumpLogic();
}
彩蛋
在項目開發中，可以在app中内置切換環境的後門，是以想根據開發環境也動态切換熱更新的環境，比如：
- 通過後門切換到QA環境，熱更新連結也對應切換成測試的
- 通過後門切換到生産環境，熱更新連結也對應切換生産的
但由于該庫熱更新的url是寫在apk/ipa中的，也沒有提供對應的API來修改。是以隻能通過改動源碼來操作了，我的思路如下：
- 橋接一個類，當環境切換時将對應的熱更新連結傳給Native，Native存儲到本地
NSUserDefaults
SharedPreferences
- 改動expo-updates源碼，hotUpdateUrl從本地擷取，當沒有擷取到時，使用在清單檔案中配置的(建議配置成生産環境的)，下面附上我改動iOS/Android源碼的dif
diff --git a/node_modules/expo-updates/android/src/main/java/expo/modules/updates/UpdatesConfiguration.java b/node_modules/expo-updates/android/src/main/java/expo/modules/updates/UpdatesConfiguration.java
index 90b5323..48ddb65 100644
--- a/node_modules/expo-updates/android/src/main/java/expo/modules/updates/UpdatesConfiguration.java
+++ b/node_modules/expo-updates/android/src/main/java/expo/modules/updates/UpdatesConfiguration.java
@@ -1,6 +1,7 @@
package expo.modules.updates;
import android.content.Context;
+import android.content.SharedPreferences;
import android.content.pm.ApplicationInfo;
import android.content.pm.PackageManager;
import android.net.Uri;
@@ -71,8 +72,15 @@ public class UpdatesConfiguration {
try {
ApplicationInfo ai = context.getPackageManager().getApplicationInfo(context.getPackageName(), PackageManager.GET_META_DATA);
- String urlString = ai.metaData.getString("expo.modules.updates.EXPO_UPDATE_URL");
- mUpdateUrl = urlString == null ? null : Uri.parse(urlString);
+
+ // ********* 這是原先邏輯 String urlString = ai.metaData.getString("expo.modules.updates.EXPO_UPDATE_URL");
+
+ // ********* 為了動态修改url連結，特改成如下，清單檔案裡的updateUrl當做預設的使用
+ String defaultUrlString = ai.metaData.getString("expo.modules.updates.EXPO_UPDATE_URL");
+ SharedPreferences hotUpdateInfo = context.getSharedPreferences("hotUpdateInfo", Context.MODE_PRIVATE);
+ String urlString = hotUpdateInfo.getString("url", defaultUrlString);
+ mUpdateUrl = Uri.parse(urlString);
+ Log.i("*****hotUpdateUrl*****", "" + urlString);
mIsEnabled = ai.metaData.getBoolean("expo.modules.updates.ENABLED", true);
mSdkVersion = ai.metaData.getString("expo.modules.updates.EXPO_SDK_VERSION");
diff --git a/node_modules/expo-updates/ios/EXUpdates/EXUpdatesConfig.m b/node_modules/expo-updates/ios/EXUpdates/EXUpdatesConfig.m
index e285f1d..63b4ac4 100644
--- a/node_modules/expo-updates/ios/EXUpdates/EXUpdatesConfig.m
+++ b/node_modules/expo-updates/ios/EXUpdates/EXUpdatesConfig.m
@@ -77,6 +77,11 @@ - (void)loadConfigFromDictionary:(NSDictionary *)config
id updateUrl = config[kEXUpdatesConfigUpdateUrlKey];
if (updateUrl && [updateUrl isKindOfClass:[NSString class]]) {
+ NSUserDefaults *defaults = [NSUserDefaults standardUserDefaults];
+ NSString *switchUpdateUrl = [defaults valueForKey:@"hotUpdateUrl"];
+ if (switchUpdateUrl) {
+ updateUrl = switchUpdateUrl;
+ }
NSURL *url = [NSURL URLWithString:(NSString *)updateUrl];
NSAssert(url, @"EXUpdatesURL must be a valid URL");
_updateUrl = url;
深坑預警
- 改完源碼打完殼子以後，此時殼子内置的Bundle的
commitTime
- 最開始我想使用releaseId是否相等來判定是否有新包，這樣就不需要考慮commitTime的先後問題，便可以解決切換熱更新連結時的Bundle新舊問題。但因為每次
reloadAsync
- 上面提到的切換熱更新連結時的Bundle新舊問題，可以通過删除重裝來解決，也可以嘗試清除App資料來解決。後者暫沒有時間測試，後續有時間在确定一下。