647
React Native熱更新及混合開發
隨著 React Native 的不斷發展完善，越來越多的公司選擇使用 React Native 替代 iOS/Android 進行部分業務線的開發，也有不少使用 Hybrid 技術的公司轉向了 React Native 。雖然React Native在目前來說仍有不少的坑，不過對於以應用開發為主的App來說完全可以勝任。
概述
在iOS應用開發中，由於Apple嚴格的審核標準和低效率，iOS應用的發版速度極慢，這對於大多數團隊來說是不能接受的，所以熱更新對於iOS應用來說就顯得尤其重要。而就在前不久，蘋果嚴禁WaxPatch、JSPatch等熱修複框架，不過慶幸的是采用Js熱更新的React Native似乎並可沒有收到多大影響。
熱更新作為React Native的優勢之一，相信很多人在選擇使用React Native來開發應用，也是因為React Native具有的熱更新特性。在熱更新方案中，比較出名的有微軟的 CodePush，React Native中文網的pushy，在調研的初期，我們參考了攜程的jsbundle 拆分和加載優化方案，但這個方案需要改變 React Native 的打包代碼及 Runtime 代碼，實施難度上非常大，並且對於應用的性能提升並不明顯，暫時不考慮這種方案。
熱更新原理
React Native的熱更新並不像原生應用更新那麼複雜，React Native的熱更新更像原生App的版本更新。用一個流程圖表示的話如下：
熱更新實現方案
當下選擇使用 React Native 的項目大都是基於原有項目的基礎上進行接入，即所謂的混合開發，而這些混合的代碼中，為了不增加帶代碼的難度（理解和維護難度），也隻是將部分非核心的代碼RN化了。
使用React Native進行熱更新，就涉及到了jsbundle的拆分和加載原理。
使用pushy進行熱更新
本部分來自官方文檔
安裝命令
在你的項目根目錄下運行以下命令：
npm install -g react-native-update-cli rnpm
npm install --save react-native-update@具體版本請看下麵的表格
react-native link react-native-update
對應版本表格
| React Native版本 | react-native-update版本 |
|---|---|
| 0.26以下 | 1.0.x |
| 0.27 - 0.28 | 2.x |
| 0.29 - 0.33 | 3.x |
| 0.34 - 當前版本 | 4.x |
注：如果RN版本低於0.29，請使用rnpm link代替react-native link命令。
例如，我當前我的React native是0.44.3版本，則命令如下：
npm install --save react-native-update@4.x
如果上麵的react-native link已成功(iOS工程和安卓工程均能看到依賴)，可以跳過此步驟。成功的效果如下：
如果，沒有請看下麵介紹。
收到Link
iOS
- 在XCode中的Project Navigator裏,右鍵點擊Libraries Add Files to [你的工程名]
- 進入node_modules react-native-update ios並選中RCTHotUpdate.xcodeproj`
- 在XCode中的project navigator裏,選中你的工程,在 Build Phases Link Binary WithLibraries 中添加 libRCTHotUpdate.a
- 繼續在Build Settings裏搜索Header Search Path，添加$(SRCROOT)/../node_modules/react-native-update/ios
- Run your project (Cmd+R)
android
- 在android/settings.gradle中添加如下代碼:
include ':react-native-update'
project(':react-native-update').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-update/android')
- 在android/app/build.gradle的 dependencies 部分增加如下代碼:
compile project(':react-native-update') - 檢查你的RN版本,如果是0.29及以上, 打開android/app/src/main/java/[...]/MainApplication.java,否則打開android/app/src/main/java/[...]/MainActivity.java。改動的地方如下： 在文件開頭增加 import cn.reactnative.modules.update.UpdatePackage;在getPackages() 方法中增加 new UpdatePackage()。
接下來需要對Bundle進行配置
配置Bundle URL
iOS
在工程target的Build Phases->Link Binary with Libraries中加入libz.tbd、libbz2.1.0.tbd。在你的AppDelegate.m文件中增加如下代碼：
#import "RCTHotUpdate.h"
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
#if DEBUG
// 原來的jsCodeLocation
jsCodeLocation = [NSURL URLWithString:@"https://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
#else
jsCodeLocation=[RCTHotUpdate bundleURL];
#endif
// ... 其它代碼
}
Android
0.29及以後版本：在你的MainApplication中增加如下代碼：
import cn.reactnative.modules.update.UpdateContext;
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
protected String getJSBundleFile() {
return UpdateContext.getBundleUrl(MainApplication.this);
}
// ... 其它代碼
}
}
0.28及以前版本：在你的MainActivity中增加如下代碼：
import cn.reactnative.modules.update.UpdateContext;
public class MainActivity extends ReactActivity {
@Override
protected String getJSBundleFile() {
return UpdateContext.getBundleUrl(this);
}
// ... 其它代碼
}
iOS的ATS例外配置
從iOS9開始，蘋果要求以白名單的形式在Info.plist中列出外部的非https接口，以督促開發者部署https協議。在我們的服務部署https協議之前，請在Info.plist中添加如下例外。具體步驟為：右鍵點擊Info.plist，選擇open as - source code。
<key>NSAppTransportSecurity</key>
<dict>
<key>NSExceptionDomains</key>
<dict>
<key>reactnative.cn</key>
<dict>
<key>NSIncludesSubdomains</key>
<true/>
<key>NSExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
</dict>
登錄與創建應用
首先請在https://update.reactnative.cn注冊帳號，然後在你的項目根目錄下運行以下命令：
$ pushy login
email: <輸入你的注冊郵箱>
password: <輸入你的密碼>
這會在項目文件夾下創建一個.update文件，注意不要把這個文件上傳到Git等CVS係統上。你可以在.gitignore末尾增加一行.update來忽略這個文件。
登錄之後可以創建應用。注意iOS平台和安卓平台需要分別創建：
$ pushy createApp --platform ios
App Name: <輸入應用名字>
$ pushy createApp --platform android
App Name: <輸入應用名字>
如果你已經在網頁端或者其它地方創建過應用，也可以直接選擇應用：
$ pushy selectApp --platform ios
1) 魚多多(ios)
3) 招財旺(ios)
Total 2 ios apps
Enter appId: <輸入應用前麵的編號>
選擇或者創建過應用後，你將可以在文件夾下看到update.json文件，其內容類似如下形式：
{
"ios": {
"appId": 1,
"appKey": "<一串隨機字符串>"
},
"android": {
"appId": 2,
"appKey": "<一串隨機字符串>"
}
}
你可以安全的把update.json上傳到Git等CVS係統上，與你的團隊共享這個文件，它不包含任何敏感信息。當然，他們在使用任何功能之前，都必須首先輸入pushy login進行登錄。至此服務器端應用的創建/選擇就已經成功了。接下來我們隻需要在客戶端添加相應的功能代碼即可。
獲取appKey
檢查更新時必須提供你的appKey，這個值保存在update.json中，並且根據平台不同而不同。你可以用如下的代碼獲取：
import {
Platform,
} from 'react-native';
import _updateConfig from './update.json';
const {appKey} = _updateConfig[Platform.OS];
注：如果你不使用pushy命令行，你也可以從網頁端查看到兩個應用appKey，並根據平台的不同來選擇。
檢查更新、下載更新
使用異步函數checkUpdate檢查當前版本是否需要更新：
checkUpdate(appKey)
.then(info => {
})
返回的info有三種情況：
- {expired: true}：該應用包(原生部分)已過期，需要前往應用市場下載新的版本。
- {upToDate: true}：當前已經更新到最新，無需進行更新。
- {update: true}：當前有新版本可以更新。info的name、description字段可以用於提示用戶，而metaInfo字段則可以根據你的需求自定義其它屬性(如是否靜默更新、是否強製更新等等)。另外還有幾個字段，包含了完整更新包或補丁包的下載地址，react-native-update會首先嚐試耗費流量更少的更新方式。將info對象傳遞給downloadUpdate作為參數即可。 ### 切換版本 downloadUpdate的返回值是一個hash字符串，它是當前版本的唯一標識。你可以使用switchVersion函數立即切換版本(此時應用會立即重新加載)，或者選擇調用 switchVersionLater，讓應用在下一次啟動的時候再加載新的版本。 ### 首次啟動、回滾 在每次更新完畢後的首次啟動時，isFirstTime常量會為true。 你必須在應用退出前合適的任何時機，調用markSuccess，否則應用下一次啟動的時候將會進行回滾操作。 這一機製稱作“反觸發”，這樣當你應用啟動初期即遭遇問題的時候，也能在下一次啟動時恢複運作。
你可以通過isFirstTime來獲知這是當前版本的首次啟動，也可以通過isRolledBack來獲知應用剛剛經曆了一次回滾操作。 並且在此處給與用戶提示信息。
附完整代碼：
import React, {
Component,
} from 'react';
import {
AppRegistry,
StyleSheet,
Platform,
Text,
View,
Alert,
TouchableOpacity,
Linking,
} from 'react-native';
import {
isFirstTime,
isRolledBack,
packageVersion,
currentVersion,
checkUpdate,
downloadUpdate,
switchVersion,
switchVersionLater,
markSuccess,
} from 'react-native-update';
import _updateConfig from './update.json';
const {appKey} = _updateConfig[Platform.OS];
class MyProject extends Component {
componentWillMount(){
if (isFirstTime) {
Alert.alert('提示', '這是當前版本第一次啟動,是否要模擬啟動失敗?失敗將回滾到上一版本', [
{text: '是', onPress: ()=>{throw new Error('模擬啟動失敗,請重啟應用')}},
{text: '否', onPress: ()=>{markSuccess()}},
]);
} else if (isRolledBack) {
Alert.alert('提示', '剛剛更新失敗了,版本被回滾.');
}
}
doUpdate = info => {
downloadUpdate(info).then(hash => {
Alert.alert('提示', '下載完畢,是否重啟應用?', [
{text: '是', onPress: ()=>{switchVersion(hash);}},
{text: '否',},
{text: '下次啟動時', onPress: ()=>{switchVersionLater(hash);}},
]);
}).catch(err => {
Alert.alert('提示', '更新失敗.');
});
};
checkUpdate = () => {
checkUpdate(appKey).then(info => {
if (info.expired) {
Alert.alert('提示', '您的應用版本已更新,請前往應用商店下載新的版本', [
{text: '確定', onPress: ()=>{info.downloadUrl && Linking.openURL(info.downloadUrl)}},
]);
} else if (info.upToDate) {
Alert.alert('提示', '您的應用版本已是最新.');
} else {
Alert.alert('提示', '檢查到新的版本'+info.name+',是否下載?\n'+ info.description, [
{text: '是', onPress: ()=>{this.doUpdate(info)}},
{text: '否',},
]);
}
}).catch(err => {
Alert.alert('提示', '更新失敗.');
});
};
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
歡迎使用熱更新服務
</Text>
<Text style={styles.instructions}>
這是版本一 {'\n'}
當前包版本號: {packageVersion}{'\n'}
當前版本Hash: {currentVersion||'(空)'}{'\n'}
</Text>
<TouchableOpacity onPress={this.checkUpdate}>
<Text style={styles.instructions}>
點擊這裏檢查更新
</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('MyProject', () => MyProject);
到此，你的應用已經具備了檢測更新的功能，接下來我們需要將應用發布出去。
注意，從update上傳發布版本到發布版本正式上線期間，不要修改任何腳本和資源，這會影響update 獲取本地代碼，從而導致版本不能更新。如果在發布之前修改了腳本或資源，請在網頁端刪除之前上傳的版本並重新上傳。
發布iOS應用
按照正常的發布流程打包.ipa文件(Xcode中運行設備選真機或Generic iOS Device，然後菜單中選擇Product-Archive)，然後運行如下命令：
pushy uploadIpa <your-package.ipa>
隨後，你就可以將你的ipa文件發布到AppStore。
發布安卓應用
Android打包的流程和原生打包apk的流程一樣，然後在android文件夾下運行./gradlew assembleRelease，你就可以在android/app/build/outputs/apk/app-release.apk中找到你的應用包。
然後使用如下命令，即可上傳apk以供後續版本比對之用。
pushy uploadApk android/app/build/outputs/apk/app-release.apk
發布熱更新版本
你可以嚐試修改一行代碼(譬如將版本一修改為版本二)，然後生成新的熱更新版本。
pushy bundle --platform <ios|android>
Bundling with React Native version: 0.22.2
<各種進度輸出>
Bundled saved to: build/output/android.1459850548545.ppk
Would you like to publish it?(Y/N)
如果想要立即發布，此時輸入Y。當然，你也可以在將來使用pushy publish --platform 來發布版本。
Uploading [========================================================] 100% 0.0s
Enter version name: <輸入版本名字，如1.0.0-rc>
Enter description: <輸入版本描述>
Enter meta info: {"ok":1}
Ok.
Would you like to bind packages to this version?(Y/N)
此時版本已經提交到update服務，但用戶暫時看不到此更新，你需要先將特定的包版本綁定到此熱更新版本上。
此時輸入Y立即綁定，你也可以在將來使用pushy update --platform 來使得對應包版本的用戶更新。 除此以外，你還可以在網頁端操作，簡單的將對應的包版本拖到此版本下即可。
Offset 0
1) FvXnROJ1 1.0.1 (no package)
2) FiWYm9lB 1.0 [1.0]
Enter versionId or page Up/page Down/Begin(U/D/B) <輸入序號,U/D翻頁,B回到開始，序號就是上麵列表中)前麵的數字>
1) 1.0(normal) - 3 FiWYm9lB (未命名)
Total 1 packages.
Enter packageId: <輸入包版本序號，序號就是上麵列表中)前麵的數字>
到此，客戶端就可以使用熱更新了，不用升級相關版本。
混合app熱更新
jsbundle 拆分
對 React Native 的代碼打包編譯後會生成一個 bundle 文件，這裏要說明一下， jsbundle 的拆分是基於生成的 bundle 文件可以看成兩部分構成（如下圖）：一是 React Native 包含的的基礎類庫，一是開發的業務代碼。
首先需要做的就是生成 common.bundle ，新建一個 blank.android.js 文件，在文件中僅引入 react 及 react native。
import React from 'react';
import {} from 'react-native';
通過打包命令編譯成 common.bundle :
react-native bundle --entry-file blank.android.js --bundle-output ~/Desktop/common.bundle --platform android --dev false
打包完整的 jsbundle ，這將會包含所有的基礎類庫及業務代碼。
最後根據 diff 算法將兩個文件進行 diff 拆分，由此會生成一個 index.diff 的二進製文件。如有多個業務代碼，相應的生成多個 diff 文件即可。
bundle 文件的拷貝及合成
在完成拆分以後，我們需要將 common.bundle 及拆分的 .diff 文件進行 zip 壓縮，放入 assets 目錄下，為了方便版本管理，我們將其文件名中寫入版本號 jsbundle_<版本號>.zip ，例如： jsbundle_1.zip ，每次改 zip 文件包跟隨發版時更新，並自動升級版本號。
接下來我們要做的就是將內置於 assets 目錄下的 jsbundle_.zip 拷貝至內部存儲，這裏推薦使用應用內部存儲。
在拷貝過程中根據曆史記錄的版本號，進行判斷是否需要執行拷貝，拷貝完成後將 common.bundle 及 *.diff 文件進行 patch 合並，合並後的文件即為一個完整的 bundle 文件，文件名規定為 *.diff.bundle ，例如： index.diff.bundle ，在加載時根據模塊名進行加載即可。
diff 文件的更新
說到熱更新，到這裏直接更新diff文件即可，並合成新的完整 bundle 文件。接下來就是將diff 文件的生成及上傳，這裏我們通過一個shell腳本來完成自動上傳功能。
if [ $platform == "android" ]; then
react-native bundle \
--entry-file $commonFile.js \
--bundle-output $androidModuleDir/common.bundle \
--platform android \
--dev false
echo "common.bundle packed!!!"
react-native bundle \
--entry-file $module.js \
--bundle-output $androidModuleDir/$module.android.bundle \
--platform android \
--dev false
echo "$module.android.bundle packed!!!"
# 對 jbdiff 打成的 jar 執行文件
chmod +x dmp.jar
echo "diff start =========>>>"
java -jar ./dmp.jar $androidModuleDir/common.bundle \
$androidModuleDir/$module.android.bundle $androidModuleDir/$module.diff
# 進行二次 zip 壓縮
zip -j $androidModuleDir/$module.diff.zip $androidModuleDir/$module.diff
elfi ...
改造原生代碼
React Native 的 bundle 文件加載做了更改，我們就不能直接使用 sdk 提供的 ReactActivity 了，對此我們需要對容器 Activity 進行改造。改造的部分如下：
public class MyReactNativeHost extends ReactNativeHost{
...
protected MyReactNativeHost(Application application, String moduleName) {
super(application);
mApplication = application;
mModuleName = moduleName;
}
...
@Override
protected ReactInstanceManager createReactInstanceManager() {
if(getUseDeveloperSupport()){ //為了保留 debug 的能力
return super.createReactInstanceManager();
}
String path = JSBundleManager.getJSBundleDirPath(mApplication)
.concat(mModuleName).concat(".diff.bundle");
ReactInstanceManager.Builder builder = ReactInstanceManager.builder()
.setApplication(mApplication)
.setJSBundleLoader(JSBundleLoader.createFileLoader(path))
.setUseDeveloperSupport(false)
.setInitialLifecycleState(LifecycleState.BEFORE_RESUME);
...
return builder.build();
}
...
}
注：由於采用加載文件係統下的 bundle 文件的形式，在測試過程中發現通過此形式加載的 bundle 文件，圖片加載時不能讀取到 res 目錄下的資源文件。要解決這個問題，主要有兩個方案：1、將 js 源碼中的邏輯進行修改，都從 res 中讀取資源；2、將 React Native 使用到的資源打包到本地，跟隨 jsbundle_*.zip 發布。
由於蘋果對熱更新的態度，我們暫且不談ios的熱更新，有興趣的可以自行研究Jspath等熱更新框架。
最後更新：2017-06-14 11:01:54