ReactNative 增量熱更新思路

增量熱更新

ReactNative 增量更新

ReactNative 增量更新的內容包含 JS 和圖片，在每次應用啓動的時候請求服務器更新。
增量更新設計到版本號的管理，版本號存儲位置有兩個，一個是應用打包的只讀目錄，另外一個是沙盒目錄。

版本概念：

基線版本：

App 使用的最新的JS版本。 此 JS 版本號是初始化打包進 App 的，當 Native 代碼升級的時候用戶須要到市場升級。iOS 能夠在 plist 文件加入一個Key 來存儲。

當前版本：

JS 在 App 內每次在線更新升級到的版本號。

升級的思路是須要拿着本地的 JS 版本號，向服務器請求最新版本。

本地的 JS 版本號有如下幾種狀態：

1. 第一次發佈帶有升級程序的 ReactNative 的App，「基線版本」爲 0，「當前版本」爲null，此時須要用「基線版本」號向服務器發送請求。
2. 平常的 JS 升級，以」當前版本「號遞增，從服務器獲取最新版本。
3. 須要發佈到市場一次大版本，「當前版本」 例如爲2.0,在打包的時候 「基線版本號」 必定是最大的，除非在發佈新包的時候忘記升級 」基線版本「，」基線版本「 假如爲3.0，JS 升級須要拿」基線版本「 發送請求。爲保險起見取 MAX(」基線版本「,"當前版本") 發送請求。

升級原理

JS增量

JS增量包生成使用BSDiff。
安卓和iOS使用BSPatch合併補丁，並導出合併方法給JS調用。

圖片增量

圖片升級使用git diff 命令找到上版本和當前版本中變化的圖片，生成圖片增量包。

原理是 ReactNative 會自動找打包命令生成的大 bundle 文件 所在的目錄下的圖片，因此只要保證咱們全量圖片和Bundle文件在一塊兒，且嚴格按照如下的目錄放置便可找到。

iOS圖片必須有根目錄 asset ，下面的圖片按照模塊文件名劃分，asset和 bundle 文件是同級目錄。。

安卓圖片目錄沒有asset,四個文件夾 drawable-hdpi,drawable-mdpi,drawable-xhdpi,drawable-xxxhdpi 並列，和bundle文件是同級目錄。

增量圖片和JS補丁打成一個ZIP文件，下載到對應版本的目錄後，首先把上個版本的圖片和JS拷貝過來，而後解壓，合併JS，覆蓋圖片。

最終實現的效果是：升級的每一個版本都在沙盒中生成一個目錄，包含 全量JS 全量圖片，若是怕圖片過多，能夠只保留三個版本，每次升級把舊的版本刪除。
回滾：若是升級後，程序啓動閃退，且次數過多，須要執行自動回滾，沙盒中保存的歷史版本就發揮做用了。只須要把當前版本號更改到上一個版本，讓系統找到舊版本的main.jsbundle 就會回滾。

API設計

原生須要暴露給JS使用的類 XSYUpgradeManager
提供方法

1. baseVersion 基線版本
2. currentVersion 當前版本
3. setVersion(version) 設置版本
4. versionDesc(source,target) 版本比較，返回bool值
5. combine(patchPath,newVersion,callback) bsdiff合併

其餘相關類：

1. XSYPatchCombine

combineIndexBundle
參數：
patchPath (String) 補丁目錄
newVersion (String) 新版本號
completionHandler(combineResult)   合併以後的回調方法

1. XSYJSVersion

setVersion 設置當前版本爲升級後的版本
參數：
version (String) 新版本號

getBaseVersion 獲取基線版本，意爲打包時候的當前最新JS版本

getCurrentVersion 獲取當前JS版本，用此方法獲得的版本號請求服務器最新版本。

versionDesc 比較版本大小，返回BOOL
參數：
source（String)
target(String)

currentVersionBundleURL 獲取當前JS版本的bundle路徑
參數：
version（String)

JS代碼更新

生成增量包

iOS:
react-native bundle --entry-file index.ios.js --bundle-output ./bundle/index.ios.jsbundle --platform ios --assets-dest ./bundle --dev false --minify true

Android:
react-native bundle --entry-file index.android.js --bundle-output ./bundle/index.android.jsbundle --platform android --assets-dest ./bundle --dev false

--entry-file 輸入文件
--platform 平臺語言
--dev 開發模式
--minify 壓縮JS
--bundle-output 輸出文件名

注意：若是Xcode直接運行打包，即使設置成--dev 爲false
選擇Release運行的時候Xcode 會自動執行此命令。

圖片更新

1.服務器生成增量包 2.手機端下載增量包 3.手機端拷貝上版本全部圖片到新版本目錄 4.手機端合併增量圖片爲全量圖片