react-native-updater-client

About

React Native 热更新插件

更新配置文件

{
  "version": "0.0.1",
  "encrypt": false,
  "min_app_version": "0.0.0",
  "ios_md5": "7e861bdbbeb2e1cd5e13e102e38b59c0",
  "update_log": "升级测试！！！",
  "ios_url": "NA",
  "ios_size": 106644,
  "proto_ver": "1.0"
}

• version — 更新版本号
• encrypt — 是否编码
• min_app_version — 最小更新版本（若app版本小于最小更新版本，则不更新）
• ios_md5 OR android_md5 — md5校验
• update_log — 更新日志
• ios_url OR android_url — 更新文件下载url
• ios_size OR android_size — 更新文件大小
• proto_ver — 协议版本号

Screenshots

Here's a GIF'ed screencast of react-native-updater-client in action.

rn-auto-updater

rn-auto-updater-android

Installation

NOTE — ReactNativeUpdaterClient requires a minimum version of 0.18 of React Native.

iOS

1. package.json add "react-native-updater-client": "git+http://192.111.110.19/ReactNative/RNUpdaterClient.git"
2. In the Xcode's "Project navigator", right click on your project's Libraries folder ➜ Add Files to "Your Project Name"
3. Go to node_modules ➜ react-native-updater-client ➜ iOS ➜ select ReactNativeUpdaterClient.xcodeproj
4. In the Xcode Project Navigator, click the root project, and in General tab, look for Linked Frameworks and Libraries. Click on the + button at the bottom and add libReactNativeUpdaterClient.a from the list.
5. Go to Build Settings tab and search for Header Search Paths. In the list, add $(SRCROOT)/../node_modules/react-native-updater-client and select recursive.
6. Go to Build Settings tab and search for Dead Code Stripping, find Release and change to No.

Android

1. In android/settings.gradle, add this

   // more stuff
   include ':ReactNativeAutoUpdater', ':app'
   project(':ReactNativeAutoUpdater').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-auto-updater/android')
   

2. In android/app/build.gradle, add this

    // more stuff
    dependencies {
      // more dependencies
      compile project(':ReactNativeAutoUpdater')
    }
   

3. In android/app/build.gradle, add this

android {
  // more stuff
  // add this
  packagingOptions {
    exclude 'META-INF/LICENSE.txt'
    exclude 'META-INF/NOTICE.txt'
  }
}

Usage

iOS

In your AppDelegate.m (make sure you complete step #5 from installation above, otherwise Xcode will not find the header file)

#import "ReactNativeUpdaterClient.h"

The code below essentially follows these steps.

1. Get an instance of ReactNativeUpdaterClient
2. Set self as a delegate
3. Initialize with updateMetadataUrl , defaultJSCodeLocation
4. Make a call to checkUpdate, checkUpdateDaily or checkUpdateWeekly
5. Don't forget to implement the delegate methods (optional)

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  // defaultJSCodeLocation is needed at least for the first startup
  NSURL* defaultJSCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

  ReactNativeUpdaterClient* updater = [ReactNativeUpdaterClient sharedInstance];
  [updater setDelegate:self];

  // We set the location of the metadata file that has information about the JS Code that is shipped with the app.
  // This metadata is used to compare the shipped code against the updates.

  [updater initializeWithUpdateMetadataUrl:[NSURL URLWithString:JS_CODE_METADATA_URL]
                     defaultJSCodeLocation:defaultJSCodeLocation];
  [updater setHostnameForRelativeDownloadURLs:@"https://www.aerofs.com"];
  [updater checkUpdate];

  NSURL* latestJSCodeLocation = [updater latestJSCodeLocation];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  self.window.rootViewController = rootViewController;
  RCTBridge* bridge = [[RCTBridge alloc] initWithBundleURL:url moduleProvider:nil launchOptions:nil];
    RCTRootView* rootView = [[RCTRootView alloc] initWithBridge:bridge moduleName:@"ReactNativeUpdaterClient" initialProperties:nil];
    self.window.rootViewController.view = rootView;
  [self.window makeKeyAndVisible];
  return YES;
}

If you want, you can ask the user to apply the update, right after an update is downloaded. To do that, implement the delegate methods. Check the Example app to see a working sample.

react-native-updater-client is highly configurable. Here are the options you can configure

ReactNativeUpdaterClient *updater = [ReactNativeUpdaterClient sharedInstance];
/* Show progress during the udpate 
 * default value - YES
 */
[updater showProgress: NO]; 

/* Allow use of cellular data to download the update 
 * default value - NO
 */
[updater allowCellularDataUse: YES];

/* Decide what type of updates to download
 * Available options - 
 *  ReactNativeAutoUpdaterMajorUpdate - will download only if major version number changes
 *  ReactNativeAutoUpdaterMinorUpdate - will download if major or minor version number changes
 *  ReactNativeAutoUpdaterPatchUpdate - will download for any version change
 * default value - ReactNativeAutoUpdaterMinorUpdate
 */
[updater downloadUpdatesForType: ReactNativeAutoUpdaterMajorUpdate];

/* Check update right now
*/
[updater checkUpdate];

/* Check update daily - Only check update once per day
*/
[updater checkUpdateDaily];

/* Check update weekly - Only check updates once per week
*/
[updater checkUpdatesWeekly];

/*  When the JSON file has a relative URL for downloading the JS Bundle,
 *  set the hostname for relative downloads
 */
[updater setHostnameForRelativeDownloadURLs:@"https://www.aerofs.com/"];

Android

1. Import the needed classes

   import com.aerofs.reactnativeautoupdater.ReactNativeAutoUpdater;
   import com.aerofs.reactnativeautoupdater.ReactNativeAutoUpdater.ReactNativeAutoUpdaterUpdateType;
   import com.aerofs.reactnativeautoupdater.ReactNativeAutoUpdater.ReactNativeAutoUpdaterFrequency;
   import com.aerofs.reactnativeautoupdater.ReactNativeAutoUpdaterActivity;
   import com.aerofs.reactnativeautoupdater.ReactNativeAutoUpdaterPackage;
   
   import javax.annotation.Nullable;
   

2. Extend your MainActivity.java from ReactNativeAutoUpdaterActivity instead of ReactActivity

   
   public class MainActivity extends ReactNativeAutoUpdaterActivity {
   
   

3. Implement the required methods

   
    /**
     *  Name of the JS Bundle file shipped with the app.
     *  This file has to be added as an Android Asset.
     * */
    @Nullable
    @Override
    protected String getBundleAssetName() {
        return "main.android.jsbundle";
    }
   
    /**
     *  URL for the metadata of the update.
     * */
    @Override
    protected String getUpdateMetadataUrl() {
        return "https://www.aerofs.com/u/8691535/update.android.json";
    }
   
    /**
     * Name of the metadata file shipped with the app.
     * This metadata is used to compare the shipped JS code against the updates.
     * */
    @Override
    protected String getMetadataAssetName() {
        return "metadata.android.json";
    }
   

4. (Optional) Implement the optional methods

    /**
     *  If your updates metadata JSON has a relative URL for downloading 
     *  the JS bundle, set this hostname.
     * */
    @Override
    protected String getHostnameForRelativeDownloadURLs() {
        return "https://www.aerofs.com";
    }
   
    /**
     *  Decide what type of updates to download.
     * Available options - 
     *  MAJOR - will download only if major version number changes
     *  MINOR - will download if major or minor version number changes
     *  PATCH - will download for any version change
     * default value - PATCH
     * */
    @Override
    protected ReactNativeAutoUpdaterUpdateType getAllowedUpdateType() {
        return ReactNativeAutoUpdater.ReactNativeAutoUpdaterUpdateType.MINOR;
    }
   
    /**
     *  Decide how frequently to check for updates.
     * Available options - 
     *  EACH_TIME - each time the app starts
     *  DAILY     - maximum once per day
     *  WEEKLY    - maximum once per week
     * default value - EACH_TIME
     * */
    @Override
    protected ReactNativeAutoUpdaterFrequency getUpdateFrequency() {
        return ReactNativeAutoUpdaterFrequency.EACH_TIME;
    }
   
    /**
     *  To show progress during the update process.
     * */
    @Override
    protected boolean getShowProgress() {
        return true;
    }
   

5. (Optional) Register Module in MainActivity.java

   This is required if you want to get the currently installed JS code version in your JS code.

    /**
     * A list of packages used by the app. If the app uses additional views
     * or modules besides the default ones, add more packages here.
     */
    @Override
    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
                new ReactNativeAutoUpdaterPackage(), // Add the ReactNativeAutoUpdater Package
                new MainReactPackage());
    }
   

JS (optional, common for iOS and Android)

var ReactNativeAutoUpdater = require('react-native-auto-updater');

ReactNativeAutoUpdater.jsCodeVersion() 
// will give you the JS code version that is currently in use