使用Pushy進(jìn)行熱更新
Pushyreactnative.cn提供的付費項目哥蔚，可以用來進(jìn)行熱更新慨畸。該平臺的實現(xiàn)原理比起CodePush要簡單些莱坎，有利于仿照該系統(tǒng)重寫一個熱更新平臺。該熱更新平臺涉及iOS native端寸士， 安卓native端和react-native端以及服務(wù)端增量更新型奥。
參考文獻(xiàn)
- https://github.com/reactnativecn/react-native-pushy/blob/master/docs/guide3.md
- https://github.com/reactnativecn/react-native-pushy
- http://update.reactnative.cn/dashboard
安裝Pushy
在你的項目根目錄下運行以下命令(不要輸入開頭的美元符號)：
#第一個命令每臺電腦只需要執(zhí)行一次
$ npm install -g react-native-update-cli rnpm
$ npm install --save react-native-update
$ rnpm link react-native-update
配置Bundle URL(iOS)
// 文檔建設(shè)中
在工程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:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
#else
jsCodeLocation=[RCTHotUpdate bundleURL];
#endif
// ... 其它代碼
}
登錄與創(chuàng)建應(yīng)用
在你的項目根目錄下運行以下命令：
$ pushy login
email: <輸入你的注冊郵箱>
password: <輸入你的密碼>
#我依稀記得我的登錄賬號和密碼分別是：
$ email: 1320681113@qq.com
$ password: gL13512740718
這會在項目文件夾下創(chuàng)建一個.update文件，注意不要把這個文件上傳到Git等CVS系統(tǒng)上厢汹。你可以在.gitignore末尾增加一行.update來忽略這個文件。
登錄之后可以創(chuàng)建應(yīng)用谐宙。注意iOS平臺和安卓平臺需要分別創(chuàng)建：
$ pushy createApp --platform ios
App Name: <輸入應(yīng)用名字>
$ pushy createApp --platform android
App Name: <輸入應(yīng)用名字>
$ pushy createApp --platform ios
App Name: testHotUpdate
Created app 1140
#這時我再刷新程序頁面發(fā)現(xiàn)已經(jīng)可以正常運行烫葬，不報錯了，喜大普奔凡蜻。
#運行pushy的testHotUpdate一直報錯搭综，提示說沒有找到 "update.json"文件，去js/index.js發(fā)現(xiàn)確實需要import Update from '../../update.json'划栓，因為我根本沒有注冊這個程序兑巾，所以沒有生成update.json，于是我在該項目根目錄下pushy login && pushy createApp --platfrom ios App Name: testHotUpdate之后再刷新程序發(fā)現(xiàn)已經(jīng)可以正常運行忠荞。
如果你已經(jīng)在網(wǎng)頁端（指Pushy的網(wǎng)站http://update.reactnative.cn/dashboard蒋歌，這里我發(fā)現(xiàn)我已經(jīng)添加了一個應(yīng)用testHotUpdate）或者其它地方創(chuàng)建過應(yīng)用，也可以直接選擇應(yīng)用：
$ pushy selectApp --platform ios
1) 魚多多(ios)
3) 招財旺(ios)
Total 2 ios apps
Enter appId: <輸入應(yīng)用前面的編號>
選擇或者創(chuàng)建國應(yīng)用后委煤，你講可以在文件夾下看到update.json文件堂油，其內(nèi)容格式如下：
{
"ios": {
"appId": 1,
"appKey": "<一串隨機(jī)字符串>"
},
"android": {
"appId": 2,
"appKey": "<一串隨機(jī)字符串>"
}
}
你可以安全的把update.json上傳到Git等CVS系統(tǒng)上，與你的團(tuán)隊共享這個文件碧绞，它不包含任何敏感信息府框。當(dāng)然，他們在使用任何功能之前讥邻，都必須首先輸入pushy login進(jìn)行登錄迫靖。
添加熱更新功能
通過上部分的準(zhǔn)備工作，該部分主要講如何給工程添加熱更新功能兴使。
獲取appKey
檢查更新時必須提供你的appKey系宜，這個值保存在update.json中，并且根據(jù)平臺不同而不同鲫惶。你可以用如下的代碼獲闰谑住：
import React, {
Platform,
} from 'react-native';
import _updateConfig from './update.json';
const {appKey} = _updateConfig[Platform.OS];
如果你不使用pushy命令行，你也可以從網(wǎng)頁端查看到兩個應(yīng)用appKey欠母，并根據(jù)平臺的不同來選擇欢策。
檢查更新、下載更新
異步函數(shù)checkUpdate可以檢測當(dāng)前版本是否需要更新：
checkUpdate(appKey)
.then(info => {
})
返回的info有三種情況：
-
{expired: true}：該應(yīng)用包(原生部分)已過期赏淌，需要前往應(yīng)用市場下載新的版本踩寇。 -
{upToDate: true}：當(dāng)前已經(jīng)更新到最新，無需進(jìn)行更新六水。 -
{update: true}：當(dāng)前有新版本可以更新俺孙。info的name辣卒、description字段可 以用于提示用戶，而metaInfo字段則可以根據(jù)你的需求自定義其它屬性(如是否靜默更新睛榄、 是否強(qiáng)制更新等等)荣茫。另外還有幾個字段，包含了完整更新包或補(bǔ)丁包的下載地址场靴， react-native-update會首先嘗試耗費流量更少的更新方式啡莉。將info對象傳遞給downloadUpdate作為參數(shù)即可。
切換版本
downloadUpdate的返回值是一個hash字符串旨剥，它是當(dāng)前版本的唯一標(biāo)識咧欣。
你可以使用switchVersion函數(shù)立即切換版本(此時應(yīng)用會立即重新加載)，或者選擇調(diào)用 switchVersionLater轨帜，讓應(yīng)用在下一次啟動的時候再加載新的版本魄咕。
首次啟動、回滾
在每次更新完畢后的首次啟動時蚌父，isFirstTime常量會為true哮兰。 你必須在應(yīng)用退出前合適的任何時機(jī)，調(diào)用markSuccess梢什，否則應(yīng)用下一次啟動的時候?qū)M(jìn)行回滾操作奠蹬。 這一機(jī)制稱作“反觸發(fā)”，這樣當(dāng)你應(yīng)用啟動初期即遭遇問題的時候嗡午，也能在下一次啟動時恢復(fù)運作囤躁。
你可以通過isFirstTime來獲知這是當(dāng)前版本的首次啟動，也可以通過isRolledBack來獲知應(yīng)用剛剛經(jīng)歷了一次回滾操作荔睹。 你可以在此時給予用戶合理的提示狸演。
完整示例
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('提示', '這是當(dāng)前版本第一次啟動,是否要模擬啟動失敗?失敗將回滾到上一版本', [
{text: '是', onPress: ()=>{throw new Error('模擬啟動失敗,請重啟應(yīng)用')}},
{text: '否', onPress: ()=>{markSuccess()}},
]);
} else if (isRolledBack) {
Alert.alert('提示', '剛剛更新失敗了,版本被回滾.');
}
}
doUpdate = info => {
downloadUpdate(info).then(hash => {
Alert.alert('提示', '下載完畢,是否重啟應(yīng)用?', [
{text: '是', onPress: ()=>{switchVersion(hash);}},
{text: '否',},
{text: '下次啟動時', onPress: ()=>{switchVersionLater(hash);}},
]);
}).catch(err => {
Alert.alert('提示', '更新失敗.');
});
};
checkUpdate = () => {
checkUpdate(appKey).then(info => {
if (info.expired) {
Alert.alert('提示', '您的應(yīng)用版本已更新,請前往應(yīng)用商店下載新的版本', [
{text: '確定', onPress: ()=>{info.downloadUrl && Linking.openURL(info.downloadUrl)}},
]);
} else if (info.upToDate) {
Alert.alert('提示', '您的應(yīng)用版本已是最新.');
} 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}>
歡迎使用熱更新服務(wù)
</Text>
<Text style={styles.instructions}>
這是版本一 {'\n'}
當(dāng)前包版本號: {packageVersion}{'\n'}
當(dāng)前版本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);
現(xiàn)在，你的應(yīng)用已經(jīng)可以通過update服務(wù)檢查版本并進(jìn)行更新了僻他。下一步宵距，你可以開始嘗試發(fā)布應(yīng)用包和版本，請參閱發(fā)布應(yīng)用
