React native hot Update (codepush used)

React native hot Update (codepush used)

In the process of mobile application development, the release and launch of an application has been a time-consuming issue that has not been well solved for a long time. Especially for Apple developers, the time for each review varies from one to seven days due to Apple's ecological environment. I remember that in the past 15 years, new applications have been rejected for many times, and the release was successful after more than half a month from submission for review to official launch. Android does not produce that much unpleasant experience. The review takes about half a day. Today, I want to share with you the use of codepush in cross-platform development. The emergence of codepush effectively solves the problem that the react native application takes too long to update dynamically.

1. codepush Introduction

Codepush is an ECS developed by Microsoft. With this feature, developers can directly deploy mobile app updates on users' devices. Codepush, as a central repository, allows developers to push updates (JS, HTML, CSS and images), and applications can query updates from the client SDK. Codepush can make the application more deterministic and allow you to directly access the user group. When fixing some minor problems and adding new features, you can directly push the code for real-time updates without binary packaging.

2. codepush advantages

Codepush can push code updates in real time, directly deploy code updates to users, support react native and Cordova, support for updating JavaScript files and image resources, and manage Alpha, beta, and production environment applications.

3. codepush Installation

A. Install codepush CLI and use nodejs-based CLI to manage the codepush account.

1. Open the Apple computer terminal and enter sudonpm install-G code-push-CLI;

2. verify whether the installation is successful. Enter code-push-V to view the version.

B. Create a codepush account

1. Enter code-push register on the terminal to enter the webpage registration page.

The value obtained is the token you need to enter in the terminal;

2. input the token from the terminal and get the following feedback after the token is successfully entered;

3. Enter code-push app add (Application name) on the terminal );

Code-push commands:

Code-push app-related commands

After completing the preceding operations, your application has been registered to the codepush server.

4. Enter code-push deployment ls (Application name)-K in the terminal to view the corresponding deployment key;

5. Enter code-push access-key ls on the terminal (Creation Time and name)

4. Integrate the codepush SDK

1. iOS integration: codepush officially provides three methods to integrate codepush in IOS projects: rnpm, cocoapods, and manual.

A. Install the codepush dependency in the react native project. Enter npm I react-native-code-push -- save in the terminal.

B. build association between react-native and react-native-code-push. Terminal input: react-native link react-native-code-push, you can choose to enter the corresponding deployment key or skip it directly. The author chooses to enter the corresponding deployment key, which is required for Android and iOS in the RN project.

C. configuration in xcode

1. Introduce codepush. xcodeproj. The same method is only required by codepush. xcodeproj.

2. Introduce codepush SDK, libz. TBD

3. Add code-push header file retrieval

4. Configure the deployment key

During react-native link react-native-code-push, we skipped the configuration of deployment key on xcode. here we need to configure it manually.

A. Select your project in the project navigation view of xcode, select the info tab, click the + button under the deployments node, select duplicate "Release configaration, and enter staging.

B. Click the + button in the build settings tab, select Add User-Defined setting, enter codepush_key, and enter deployment key.

 

In the newly added codepush_key node, debug is not required. Release is filled with the production key value of codepush, and staging is filled with the key value of staging on codepush:

C. Open the info. plist file, enter $ (codepush_key) in codepushdeploymentkey, and change bundle versions to three,

So far, codepush integration on the IOS native layer has been completed. Next, use access codepush in react-native.

2. Android Integration

A. install the react-native-code-push plug-in the project. Enter NPM install -- save react-native-code-push in the terminal. (If IOS has been integrated in the project, you can skip this step)

B. Install the plug-in the android project. codepush provides two methods: rnpm and manual. The author uses rnpm and enters sudo NPM I-g rnpm on the terminal;

C. automatically configure codepush In the android file. Enter rnpm link react-native-code-push in the terminal;

D. view the configuration in Android;

1. Check whether the "apply from:".../../node_modules/react-native-code-Push/Android/codepush. gradle "file is available in the android/APP/build. gradle file"

2. in/Android/settings. whether the gradle file has ': react-native-code-push' project (': react-native-code-push '). projectdir = new file (rootproject. projectdir ,'.. /node_modules/react-native-code-Push/Android/APP ')

E. Configure the deployment key

1. Get the project deployment key, and enter code-push deployment ls (Application name)-K in the terminal.

2. Modify the deployment key in the mainapplication. Java file.

F. Modify versionname (codepush requires three digits). In Android/APP/build. gradle, there is an android. defaultconfig. versionname attribute.

So far, the android native layer codepush integration has been completed, and the next step is to use access codepush in react-native.

4. Add the corresponding codepush IN Rn

Load the codepush module in JS: Import codepush from 'react-native-code-push', call the Sync method in componentdidmount, and request to update codepush. Sync () in the background ().

5. Use codepush for hot updates

Codepush supports two update release methods: code-push release-react and code-push release.

A. Use code-push release-react to publish an update. This method combines the package with the release and enters code-push release-react on the terminal.

Eg.

Other statements: code-push release-react hello-world IOS -- t 1.0.0 -- Dev false -- d Production -- des "update content :..." -- M true. (Note: Upgrade --tis the version number of the installation package. ipademo.apk; -- Dev indicates whether to enable the developer mode (the default value is false); -- d indicates the environment in which the update is to be released, namely, production and staging (the default value is staging ); -- des indicates the update description; -- M indicates the force update .)

In summary, the simplest codepush is complete and will be improved in the future. (This can be used in the test)

React native hot Update (codepush used)