This article is shared by Ding Wulong from our team

preface

With the emergence of React – Native, a more convenient way of mobile development emerged. Since React – Native uses scripting language to explain the execution mode, this execution mode only needs to replace script files. There is no need to release the application again, which greatly saves the release time and facilitates iterative development. The hot update component mainly described in this paper is pusHY, which is developed in China. Its function is similar to CodePush, but because CodePush is foreign, its access speed in China is relatively slow, pusHY supports incremental update. Minimize the amount of updated data and save traffic.

Operation process

1. To use pusHY, create an RN project with terminal input

React-native init projectName --version 0.55.4 // Specify version 0.55.4Copy the code

2. Install the Update tool because pushy hot update requires uodate

NPM install -g react-native update-cli // only need to run once per PCCopy the code

3. Install the PUSHY component. The YARN mode or NPM mode is used

//yarn add react-native update // NPM install react-native update --save // Link to the react-native link in the project react-native-updateCopy the code

Configure the Bundle URL

  1. Add libz. TBD and libbz2.1.0.tbd 2 to Build Phases->Link Binary with Libraries. Then add the following code to the appdelegate. m file
. #import "rcthotupdate.h" - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { NSURL *jsCodeLocation; #if DEBUG jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil]; JsCodeLocation =[RCTHotUpdate bundleURL]; #else jsCodeLocation=[RCTHotUpdate bundleURL]; #endif ...... }Copy the code

3. Whitelist configuration outside iOS

Starting with iOS9, apple requires that external non-https interfaces be whitelisted in info.plist to urge developers to deploy HTTPS. Before deploying the HTTPS protocol for our service, please add the following exceptions to info.plist

4. Log in to and create an application

1. Register an account in update.reactnative. Cn, CD the account to the root directory of the project, and run the command

Pushy Login Email: < registered email address > Password: < password >Copy the code

A.update file is automatically generated in the project root directory after execution. Note: Do not upload this file to a CVS system such as Git. You can ignore this file by adding an.update line to the end of.gitignore.) After login, create android or ios apps (no more than 3 apps per account), and create both apps separately

//an pushy createApp --platform android App Name: < input App Name >Copy the code

Once the application is created, you can see the update.json file in your project, which looks like this

{
    "ios": {
        "appId": 14954,
        "appKey": "OEKJy0mUCcbaFR9UJrMFrEOH-k89FX44"
    }
}
Copy the code

Update. json can be uploaded to a CVS system such as Git and shared with your team. It does not contain any sensitive information. Of course, they must first type pushy login to login before they can use any of the features. Now that the above steps are complete, it’s time to add the hot update functionality code to the project

Hot update function is implemented

Get Appkey

The appKey must be provided to check for updates. An AppKey is generated when an application is created. This value is stored in the update.json file and can be obtained from the app.js file

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

Check for updates/download updates

You can use the asynchronous function checkUpdate to check whether the current version needs to be updated

checkUpdate(appKey)
    .then(info => {
    })
Copy the code

{expired: true} : The application package (native part) has expired and needs to be updated in the application market. 2.{upToDate: true} The current version is the latest version and does not need to be updated. True} indicates that a new version is available to update. Info’s name and description fields can be used to prompt the user, while the metaInfo field can be used to customize other attributes (such as silent updates, forced updates, etc.) according to your needs. There are also several fields that contain the download address of the full update package or patch package, and the React-native update will try a less expensive update first. Pass the Info object as a parameter to downloadUpdate.

Switch version

DownloadUpdate returns a hash string that is unique to the current version. You can use the switchVersion function to quickly switch versions and the application will load immediately, as shown below

import React, {Component} from 'react' import { Platform, View, Alert, } from 'react-native' import { isFirstTime, isRolledBack, checkUpdate, downloadUpdate, switchVersion, switchVersionLater, markSuccess, } from 'react-native-update' ... ComponentWillMount () {if (isFirstTime) {Alert. ', [{text: 'yes ', onPress: () => {throw new Error(' simulation startup failed, please restart the application ')}}, {text:' no ', onPress: () => {markSuccess()}},])} else if (isRolledBack) {Alert. Alert (' Alert ', 'just failed, version was rolled back ')} this.checkUpdate()}... DoUpdate = (info) => {downloadUpdate(info). Then ((hash) => {Alert. Alert (' Alert ', 'Do you want to restart the application after downloading? '[{text:' is', onPress: () = > {switchVersion (hash)}}, {text: 'no'}, {text: 'the next startup, onPress: () = > {switchVersionLater (hash)}},])}). The catch ((err) = > {Alert. Alert (' prompt ', 'update failed.')})}; CheckUpdate = () => {checkUpdate(appKey).then((info) => {// alert(info.uptodate) if (info.expired) {alert. Alert (' alert ', 'Your app version has been updated, please go to the app store to download the new version ', [{text:' OK ', onPress: () = > {}},])} else if (info. UpToDate) {Alert. Alert (' prompt ', 'your application version is the latest.)} else {Alert. The Alert (' prompt', ${` check to the new version info. Name}, download? \ n ${info. The description} `, [{text: 'is', onPress: () = > {enclosing doUpdate (info)}}, {text: 'no'},])}}). The catch ((err) = > {Alert. Alert (' prompt ', 'update failed.')})}...Copy the code

You can now check if the version has been updated using the Update service,

Release application packages and versions

Caution Do not change the script files and resources during the release period. Otherwise, the script may fail to be updated.

1. Package the project to product-archive in real or Generic iOS Device mode. After the package is complete, generate an IPA file and upload it to the distribution platform for download and test

Pushy uploadIpa IPA pathCopy the code

Release hot updates

Modify a line of code (such as adding a popbox to the app.js file) and generate a new hot update.

Pushy Bundle -- Platform ios Bundling with React Native Version: 0.55.4..... Would you like to publish it? (Y/N)Copy the code

If you want to publish immediately, type Y,

Uploading [= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =] 100% Enter version 0.0 s name: 1.100 Enter description: Update Enter meta info: {" OK ":1} Version published: 42053 Would you like to bind packages to this version? (Y/N)Copy the code

At this point, the version has been submitted to the Update service, but users cannot see the update for the time being. You need to bind the specific package version to the hot update version first by typing Y

Y 21144(normal) (newest) Total 1 packages. Enter packageId: 21144 Ok.Copy the code

At this point, hot update integration is complete,