ReactNative 告別CodePush，自建熱更新版本升級環境

微軟的CodePush熱更新很是難用你們都知道，速度跟被牆了沒什麼區別。

另一方面，咱們不但願把代碼放到別人的服務器。本身寫接口更新總歸感受安全一點。

so，就來本身搞個React-Native APP的熱更新管理工具吧。暫且命名爲hotdog。

 

/**************************************************/

首先咱們要弄清react-native啓動的原理，是直接調用jslocation的jsbundle文件和assets資源文件。

由此，咱們能夠本身經過的服務器接口去判斷版本，並下載最新的而後替換相應的文件，而後從這個文件調用啓動APP。這就像以前的一些H5APP同樣作版本的管理。

 

以iOS爲例，咱們須要分如下幾步去搭建這個本身的RN升級插件：

1、設置默認jsbundle地址（好比document文件夾）：

1.首先打包的時候把jsbundle和assets放入copy bundle resource，每次啓動後，檢測document文件夾是否存在，不存在則拷貝到document文件夾，而後給RN框架讀取啓動。

咱們創建以下的bundle文件管理類：

MXBundleHelper.h

#import <Foundation/Foundation.h>

@interface MXBundleHelper : NSObject

+(NSURL *)getBundlePath;

@end

MXBundleHelper.m

#import "MXBundleHelper.h"
#import "RCTBundleURLProvider.h"
@implementation MXBundleHelper
+(NSURL *)getBundlePath{
#ifdef  DEBUG
  NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
  return jsCodeLocation;
#else
  //須要存放和讀取的document路徑
  //jsbundle地址
  NSString *jsCachePath = [NSString stringWithFormat:@"%@/\%@",NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES)[0],@"main.jsbundle"];
  //assets文件夾地址
  NSString *assetsCachePath = [NSString stringWithFormat:@"%@/\%@",NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES)[0],@"assets"];
  
  //判斷JSBundle是否存在
  BOOL jsExist = [[NSFileManager defaultManager] fileExistsAtPath:jsCachePath];
  //若是已存在
  if(jsExist){
    NSLog(@"js已存在: %@",jsCachePath);
    //若是不存在
  }else{
    NSString *jsBundlePath = [[NSBundle mainBundle] pathForResource:@"main" ofType:@"jsbundle"];
    [[NSFileManager defaultManager] copyItemAtPath:jsBundlePath toPath:jsCachePath error:nil];
    NSLog(@"js已拷貝至Document: %@",jsCachePath);
  }
  
  //判斷assets是否存在
  BOOL assetsExist = [[NSFileManager defaultManager] fileExistsAtPath:assetsCachePath];
  //若是已存在
  if(assetsExist){
    NSLog(@"assets已存在: %@",assetsCachePath);
    //若是不存在
  }else{
    NSString *assetsBundlePath = [[NSBundle mainBundle] pathForResource:@"assets" ofType:nil];
    [[NSFileManager defaultManager] copyItemAtPath:assetsBundlePath toPath:assetsCachePath error:nil];
    NSLog(@"assets已拷貝至Document: %@",assetsCachePath);
  }
  return [NSURL URLWithString:jsCachePath];
#endif
}

 

2、作升級檢測，有更新則下載，而後對本地文件進行替換:

假如咱們不當即作更新，能夠更新後替換，而後不會影響本次APP的使用，下次使用就會默認是最新的了。

若是當即更新的話，須要使用到RCTBridge類裏的reload函數進行重啓。

這裏經過NSURLSession進行下載，而後zip解壓縮等方法來實現文件的替換。

 

MXUpdateHelper.h

#import <Foundation/Foundation.h>
typedef void(^FinishBlock) (NSInteger status,id data);

@interface MXUpdateHelper : NSObject
+(void)checkUpdate:(FinishBlock)finish;
@end

MXUpdateHelper.m

#import "MXUpdateHelper.h"

@implementation MXUpdateHelper
+(void)checkUpdate:(FinishBlock)finish{
  NSString *url = @"http://www.xxx.com/xxxxxxx";
  NSMutableURLRequest *newRequest = [[NSMutableURLRequest alloc] initWithURL:[NSURL URLWithString:url]];
  [newRequest setHTTPMethod:@"GET"];
  [NSURLConnection sendAsynchronousRequest:newRequest queue:[NSOperationQueue mainQueue] completionHandler:^(NSURLResponse * response, NSData * data, NSError * connectionError) {
    if(connectionError == nil){
      //請求本身服務器的API，判斷當前的JS版本是否最新
      /*
       {
       "version":"1.0.5",
       "fileUrl":"http://www.xxxx.com/xxx.zip",
       "message":"有新版本，請更新到咱們最新的版本",
       "forceUpdate:"NO"
       }
       */
      //假如須要更新
      NSString *curVersion = @"1.0.0";
      NSString *newVersion = @"2.0.0";
      //通常狀況下不同，就是舊版本了
      if(![curVersion isEqualToString:newVersion]){
        finish(1,data);
      }else{
        finish(0,nil);
      }
    }
  }];
}
@end

 

 

3、APPdelegate中的定製，彈框，直接強制更新等

若是須要強制刷新reload，咱們新建RCTView的方式也須要稍微改下，經過新建一個RCTBridge的對象。

由於RCTBridge中有reload的接口可使用。

 

#import "AppDelegate.h"
#import "RCTBundleURLProvider.h"
#import "RCTRootView.h"
#import "MXBundleHelper.h"
#import "MXUpdateHelper.h"
#import "MXFileHelper.h"
#import "SSZipArchive.h"
@interface AppDelegate()<UIAlertViewDelegate>
@property (nonatomic,strong) RCTBridge *bridge;
@property (nonatomic,strong) NSDictionary *versionDic;
@end

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{

  
  NSURL *jsCodeLocation;
  jsCodeLocation = [MXBundleHelper getBundlePath];
  
  _bridge = [[RCTBridge alloc] initWithBundleURL:jsCodeLocation
                                  moduleProvider:nil
                                   launchOptions:launchOptions];
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:_bridge moduleName:@"MXVersionManager" initialProperties:nil];

  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  
  [self.window makeKeyAndVisible];
  
  
  __weak AppDelegate *weakself = self;
  //更新檢測
  [MXUpdateHelper checkUpdate:^(NSInteger status, id data) {
    if(status == 1){
      weakself.versionDic = data;
      /*
      這裏具體關乎用戶體驗的方式就多種多樣了，好比自動當即更新，彈框當即更新，自動下載下次打開再更新等。
      */
      UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"提示" message:data[@"message"] delegate:self cancelButtonTitle:@"取消" otherButtonTitles:@"如今更新", nil];
      [alert show];
        //進行下載，並更新
        //下載完，覆蓋JS和assets，並reload界面
//      [weakself.bridge reload];
    }
  }];
  return YES;
}

- (void)alertView:(UIAlertView *)alertView clickedButtonAtIndex:(NSInteger)buttonIndex{
  if(buttonIndex == 1){
      //更新
    [[MXFileHelper shared] downloadFileWithURLString:_versionDic[@"fileurl"] finish:^(NSInteger status, id data) {
      if(status == 1){
        NSLog(@"下載完成");
        NSError *error;
        NSString *filePath = (NSString *)data;
        NSString *desPath = [NSString stringWithFormat:@"%@",NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES)[0]];
        [SSZipArchive unzipFileAtPath:filePath toDestination:desPath overwrite:YES password:nil error:&error];
        if(!error){
          NSLog(@"解壓成功");
          [_bridge reload];
        }else{
          NSLog(@"解壓失敗");
        }
      }
    }];
  }
}

 

流程簡單，經過接口請求版本，而後下載到document去訪問。 其中須要作版本緩存，Zip的解壓縮，以及文件拷貝等。

運行iOS工程能夠看到效果。 初始爲1.0.0版本，而後更新後升級到1.0.1版本。

 

demo: https://github.com/rayshen/MXHotdog