RN精進(jìn)筆記（十二）熱更新篇

使用Pushy進(jìn)行熱更新

Pushyreactnative.cn提供的付費(fèi)項(xiàng)目，可以用來(lái)進(jìn)行熱更新。該平臺(tái)的實(shí)現(xiàn)原理比起CodePush要簡(jiǎn)單些，有利于仿照該系統(tǒng)重寫(xiě)一個(gè)熱更新平臺(tái)。該熱更新平臺(tái)涉及iOS native端， 安卓native端和react-native端以及服務(wù)端增量更新。

參考文獻(xiàn)
  1. https://github.com/reactnativecn/react-native-pushy/blob/master/docs/guide3.md
  2. https://github.com/reactnativecn/react-native-pushy
  3. http://update.reactnative.cn/dashboard
安裝Pushy

在你的項(xiàng)目根目錄下運(yùn)行以下命令(不要輸入開(kāi)頭的美元符號(hào))：

#第一個(gè)命令每臺(tái)電腦只需要執(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
  // 原來(lái)的jsCodeLocation
  jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
#else
  jsCodeLocation=[RCTHotUpdate bundleURL];
#endif
  // ... 其它代碼
}
登錄與創(chuàng)建應(yīng)用

在你的項(xiàng)目根目錄下運(yùn)行以下命令：

$ pushy login
email: <輸入你的注冊(cè)郵箱>
password: <輸入你的密碼>
#我依稀記得我的登錄賬號(hào)和密碼分別是：
$ email: 1320681113@qq.com
$ password: gL13512740718

這會(huì)在項(xiàng)目文件夾下創(chuàng)建一個(gè).update文件，注意不要把這個(gè)文件上傳到Git等CVS系統(tǒng)上。你可以在.gitignore末尾增加一行.update來(lái)忽略這個(gè)文件。

登錄之后可以創(chuàng)建應(yīng)用。注意iOS平臺(tái)和安卓平臺(tái)需要分別創(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
#這時(shí)我再刷新程序頁(yè)面發(fā)現(xiàn)已經(jīng)可以正常運(yùn)行，不報(bào)錯(cuò)了，喜大普奔。
#運(yùn)行pushy的testHotUpdate一直報(bào)錯(cuò)，提示說(shuō)沒(méi)有找到 "update.json"文件，去js/index.js發(fā)現(xiàn)確實(shí)需要import Update from '../../update.json'，因?yàn)槲腋緵](méi)有注冊(cè)這個(gè)程序，所以沒(méi)有生成update.json，于是我在該項(xiàng)目根目錄下pushy login && pushy createApp --platfrom ios App Name: testHotUpdate之后再刷新程序發(fā)現(xiàn)已經(jīng)可以正常運(yùn)行。

如果你已經(jīng)在網(wǎng)頁(yè)端（指Pushy的網(wǎng)站http://update.reactnative.cn/dashboard，這里我發(fā)現(xiàn)我已經(jīng)添加了一個(gè)應(yīng)用testHotUpdate）或者其它地方創(chuàng)建過(guò)應(yīng)用，也可以直接選擇應(yīng)用：

$ pushy selectApp --platform ios
1) 魚(yú)多多(ios)
3) 招財(cái)旺(ios)

Total 2 ios apps
Enter appId: <輸入應(yīng)用前面的編號(hào)>

選擇或者創(chuàng)建國(guó)應(yīng)用后，你講可以在文件夾下看到update.json文件，其內(nèi)容格式如下：

{
    "ios": {
        "appId": 1,
        "appKey": "<一串隨機(jī)字符串>"
    },
    "android": {
        "appId": 2,
        "appKey": "<一串隨機(jī)字符串>"
    }
}

你可以安全的把update.json上傳到Git等CVS系統(tǒng)上，與你的團(tuán)隊(duì)共享這個(gè)文件，它不包含任何敏感信息。當(dāng)然，他們?cè)谑褂萌魏喂δ苤?，都必須首先輸?code>pushy login進(jìn)行登錄。

添加熱更新功能

通過(guò)上部分的準(zhǔn)備工作，該部分主要講如何給工程添加熱更新功能。

獲取appKey

檢查更新時(shí)必須提供你的appKey，這個(gè)值保存在update.json中，并且根據(jù)平臺(tái)不同而不同。你可以用如下的代碼獲?。?/p> 

import React, {
  Platform,
} from 'react-native';

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

如果你不使用pushy命令行，你也可以從網(wǎng)頁(yè)端查看到兩個(gè)應(yīng)用appKey，并根據(jù)平臺(tái)的不同來(lái)選擇。

檢查更新、下載更新

異步函數(shù)checkUpdate可以檢測(cè)當(dāng)前版本是否需要更新：

checkUpdate(appKey)
    .then(info => {
    })

返回的info有三種情況：

  1. {expired: true}：該應(yīng)用包(原生部分)已過(guò)期，需要前往應(yīng)用市場(chǎng)下載新的版本。
  2. {upToDate: true}：當(dāng)前已經(jīng)更新到最新，無(wú)需進(jìn)行更新。
  3. {update: true}：當(dāng)前有新版本可以更新。info的name、description字段可 以用于提示用戶，而metaInfo字段則可以根據(jù)你的需求自定義其它屬性(如是否靜默更新、 是否強(qiáng)制更新等等)。另外還有幾個(gè)字段，包含了完整更新包或補(bǔ)丁包的下載地址， react-native-update會(huì)首先嘗試耗費(fèi)流量更少的更新方式。將info對(duì)象傳遞給downloadUpdate作為參數(shù)即可。
切換版本

downloadUpdate的返回值是一個(gè)hash字符串，它是當(dāng)前版本的唯一標(biāo)識(shí)。

你可以使用switchVersion函數(shù)立即切換版本(此時(shí)應(yīng)用會(huì)立即重新加載)，或者選擇調(diào)用 switchVersionLater，讓?xiě)?yīng)用在下一次啟動(dòng)的時(shí)候再加載新的版本。

首次啟動(dòng)、回滾

在每次更新完畢后的首次啟動(dòng)時(shí)，isFirstTime常量會(huì)為true。 你必須在應(yīng)用退出前合適的任何時(shí)機(jī)，調(diào)用markSuccess，否則應(yīng)用下一次啟動(dòng)的時(shí)候?qū)?huì)進(jìn)行回滾操作。 這一機(jī)制稱(chēng)作“反觸發(fā)”，這樣當(dāng)你應(yīng)用啟動(dòng)初期即遭遇問(wèn)題的時(shí)候，也能在下一次啟動(dòng)時(shí)恢復(fù)運(yùn)作。

你可以通過(guò)isFirstTime來(lái)獲知這是當(dāng)前版本的首次啟動(dòng)，也可以通過(guò)isRolledBack來(lái)獲知應(yīng)用剛剛經(jīng)歷了一次回滾操作。 你可以在此時(shí)給予用戶合理的提示。

完整示例
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)前版本第一次啟動(dòng),是否要模擬啟動(dòng)失敗?失敗將回滾到上一版本', [
        {text: '是', onPress: ()=>{throw new Error('模擬啟動(dòng)失敗,請(qǐng)重啟應(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: '下次啟動(dòng)時(shí)', onPress: ()=>{switchVersionLater(hash);}},
      ]);
    }).catch(err => { 
      Alert.alert('提示', '更新失敗.');
    });
  };
  checkUpdate = () => {
    checkUpdate(appKey).then(info => {
      if (info.expired) {
        Alert.alert('提示', '您的應(yīng)用版本已更新,請(qǐ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)前包版本號(hào): {packageVersion}{'\n'}
          當(dāng)前版本Hash: {currentVersion||'(空)'}{'\n'}
        </Text>
        <TouchableOpacity onPress={this.checkUpdate}>
          <Text style={styles.instructions}>
            點(diǎn)擊這里檢查更新
          </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)可以通過(guò)update服務(wù)檢查版本并進(jìn)行更新了。下一步，你可以開(kāi)始嘗試發(fā)布應(yīng)用包和版本，請(qǐng)參閱發(fā)布應(yīng)用

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,812評(píng)論 25贊 709
  • 開(kāi)發(fā)React Native (以下簡(jiǎn)稱(chēng) RN)主要就是看中他的動(dòng)態(tài)更新和跨平臺(tái)以及代碼復(fù)用，本文介紹RN的動(dòng)態(tài)更...
    沐風(fēng)雨木閱讀 2,294評(píng)論 2贊 1
  • 開(kāi)發(fā)完了，該看看如何上線和維護(hù)一個(gè)項(xiàng)目了。 （一）打包apk 乍一看目錄結(jié)構(gòu)，有一個(gè)Android的gradle項(xiàng)...
    大杰哥_2bec閱讀 9,840評(píng)論 1贊 8
  • 前段時(shí)間寫(xiě)作老師推薦了一本《姥姥語(yǔ)錄》，是主持人倪萍寫(xiě)的，其實(shí)對(duì)于倪萍我不是很了解，可能是因?yàn)樵谒艹雒臅r(shí)候，我...
    秋千小書(shū)閱讀 1,046評(píng)論 2贊 0
  • "我言秋日勝春朝"，自古文人都喜歡秋天，因?yàn)樗硎斋@，也代表了抒情。涼風(fēng)習(xí)習(xí)，天高云淡，一抬頭，你看到的是...
    云舒與小白閱讀 218評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容