React Native熱更新(iOS)-Pushy

React Native的出現，使的開發iOS代碼出現了更便捷的方式。由於RN是使用腳本語言編寫的，實現了“解釋執行”的方式，而這種執行方式的修改只需替換腳步即可，不需要重新發佈程式，熱更新的方式極大的方便了迭代開發。

今天我們選擇的熱更新組件是Pushy，這是國內開發的，功能類似CodePush（CodePush在國內訪問及其慢，長城寬度根本無法訪問），Pushy支持增量更新，最大化的降低更新的數據量，節約流量。

下麵介紹如何利用Pushy進行熱更新：

1. 創建react native工程

$react-native init PushyDemo

2. 安裝update工具, Pushy熱更新需要update配合使用

• RN 0.29+

$npm install -g react-native-update-cli

• RN 0.28及以下

$npm install -g react-native-update-cli rnpm

3. 在PushyDemo目錄下添加Pushy組件並自動link

• RN 0.29+

$ npm install --save react-native-update
$ react-native link react-native-update

• RN 0.27-0.28

$ npm install --save [email protected]
$ rnpm link react-native-update

• RN 0.26及以下

$ npm install --save --save-exact [email protected]
$ rnpm link react-native-update

4. 配置Bundle URL

• 在工程target的Build Phases --> Link Binary with Libraries中加入libz.tbd、libbz2.1.0.tbd
• 在你的AppDelegate.m文件中增加如下代碼：

#import "RCTHotUpdate.h"

#if DEBUG
    // 原來的jsCodeLocation
    jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
    #else
    jsCodeLocation=[RCTHotUpdate bundleURL];
#endif

5. 配置ATS

• 從iOS9開始，蘋果要求以白名單的形式在Info.plist中列出外部的非https介面，以督促開發者部署https協議。在我們的服務部署https協議之前，請在Info.plist中添加如下，其中true的類型必須是String：

NSAppTransportSecurity
    NSExceptionDomains  
        reactnative.cn  
    NSIncludesSubdomains

6. 登錄與創建應用

• 登錄

$ pushy
loginemail: <輸入你的註冊郵箱>
password: <輸入你的密碼>

• 創建應用

$ pushy createApp --platform ios
App Name: <輸入應用名字>

7. 添加熱更新

• 導入認證key，檢查更新時必須提供你的appKey，這個值保存在update.json中

import {
    Platform,
} from 'react-native';
import _updateConfig from './update.json';
const {appKey} = _updateConfig[Platform.OS];

• 檢查更新，下載更新

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('提示', '更新失敗.' + err);
    });
};

8. 發佈iOS應用

• 打包ipa文件，並把文件放到PushyDemo的根目錄

• 上傳ipa，以供後續版本對比只用

    $ pushy uploadIpa PushyDemo.ipa
    Uploading [==================================================================] 100% 0.0s
    Ipa uploaded: 2362
    GandalfdeiMac:PushyDemo gandalf$ pushy bundle --platform ios
    Bundling with React Native version: 0.34.0
    [2016-09-27 14:21:58] Building Dependency Graph
    編譯信息......(略)
    [2016-09-27 14:22:25] Building Dependency Graph (26748ms)
    transformed 368/368 (100%)
    [2016-09-27 14:22:32] Finding dependencies (28763ms)
    bundle: start
    bundle: finish
    bundle: Writing bundle output to: /Users/gandalf/Documents/kelvin/Github/HotUpdate/PushyDemo/build/intermedia/ios/index.bundlejs
    bundle: Copying 5 asset files
    bundle: Done writing bundle output
    bundle: Done copying assets
    Packing
    Bundled saved to: build/output/ios.1474957297204.ppk
    Would you like to publish it?(Y/N) Y
    Uploading [==================================================================] 100% 0.0s
    Enter version name: 1.1.0
    Enter description: change upgrade description
    Enter meta info: {"ok": 1}
    Version published: 5244
    Would you like to bind packages to this version?(Y/N) Y
    2362) 1.0(normal) (newest)
    Total 1 packages.
    Enter packageId: 2362
    OK.

• 隨後你可以選擇往AppStore發佈這個版本，也可以先通過Test flight等方法進行測試，或者你可以把ipa包通過iTunes安裝到手機進行後續測試。

9. 發佈熱更新版本

• 修改代碼後，打包新的版本

    $ pushy bundle --platform ios
    Bundling with React Native version: 0.34.0
    [2016-09-27 14:33:39] Building Dependency Graph
    編譯信息......(略)
    [2016-09-27 14:33:51] Building Dependency Graph (12461ms)
    transformed 369/369 (100%)
    [2016-09-27 14:33:54] Finding dependencies (10696ms)
    bundle: start
    bundle: finish
    bundle: Writing bundle output to: /Users/gandalf/Documents/kelvin/Github/HotUpdate/PushyDemo/build/intermedia/ios/index.bundlejs
    bundle: Done writing bundle output
    bundle: Copying 6 asset files
    bundle: Done copying assets
    Packing
    Bundled saved to: build/output/ios.1474958010480.ppk
    Would you like to publish it?(Y/N) Y
    Uploading [==================================================================] 100% 0.0s
    Enter version name: 1.2.0
    Enter description: add image
    Enter meta info: {"ok": 1}
    Version published: 5247
    Would you like to bind packages to this version?(Y/N) Y
    2362) 1.0(normal) - 5244 Fv97KfnZ 1.1.0
    Total 1 packages.
    Enter packageId: 2362
    Ok.

10. 點擊客戶端的刷新按鈕，即可看到有更新版本的提示

到此，已經完成了植入代碼熱更新的全部工作。

參考資料如下

https://github.com/reactnativecn/react-native-pushy/