preface

Code-push will be downloaded in full during the first update, in preparation for the subsequent incremental update of resources. Notice that it’s only resource files that get incremented, not bundles, and bundle increments are a good place to optimize as bundles get bigger and bigger.

precondition

Use code-push-server to set up hot switch service

Change is_USe_DIFF_TEXT to 1 in the codePush Apps table for linking the remote database

Native end uses Google Diff-match-patch to handle merge

Android client adaptation, need to merge PR1393

IOS client adaptation, need to merge PR 1399

Of course you can use it directly

"react-native-code-push": "git+https://[email protected]/lisong/react-native-code-push.git"// React-Native 0.62 can be used."react-native-code-push": "https://github.com/syanbo/react-native-code-push/archive/v6.2.0-beta.1.tar.gz"
Copy the code

Pay attention to

About the react. Gradle

apply from: ".. /.. /node_modules/react-native/react.gradle"
Copy the code

This plug-in does two main things

  • Bundle ${targetName}JsAndAssets also calls the Node script react-native bundle.

  • Copy ${targetName}BundledJs copies the bundle files from mergeAssets to Assets during the Android project build process.

If Android is packaged using the React-native bundle customization, there is no need to rely on react.gradle

About codepush. Gradle

apply from: ".. /.. /node_modules/react-native-code-push/android/codepush.gradle"
Copy the code

It also does two things

  • Record the build time of apK files
resValue 'string'."CODE_PUSH_APK_BUILD_TIME", String.format("\"%d\"", System.currentTimeMillis())
Copy the code
  • Generate CodePushHash
/ / the node script generateBundledResourcesHash parameter is the react. Gradle generated resource pathcommandLine (*nodeExecutableAndArgs, "${nodeModulesPath}/react-native-code-push/scripts/generateBundledResourcesHash.js", resourcesDir, jsBundleFile, jsBundleDir)
Copy the code

Android React-Native Bundle custom package handling (no custom skip)

  • Remove the above 2 Gradle plugins from native introduction

  • Add CODE_PUSH_APK_BUILD_TIME to buildTypes environment

buildTypes {
        debug {
           resValue 'string'."CODE_PUSH_APK_BUILD_TIME", String.format("\"%d\"", System.currentTimeMillis())
        }
        ...
        release {
            resValue 'string'."CODE_PUSH_APK_BUILD_TIME", String.format("\"%d\"", System.currentTimeMillis())
        }
    }
Copy the code
  • React – native bundle packaging is completed, the incoming call the corresponding path parameters generateBundledResourcesHash script
echo "-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- install node_modules depend on -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --"
yarn

echo "-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- to remove old RN Bundle resources -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --"

Because every time the Assets of the RN package are replaced, obsolete images may still exist in it;
So clear it before each RN packet.
PUSH_DIR="./CodePush"
if [ -d "$PUSH_DIR" ];then
  rm -rf $PUSH_DIR
fi
mkdir $PUSH_DIR
find $PUSH_DIR -name .DS_Store | xargs rm -rf

echo "-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- to generate new Android RN Bundle resources -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --"
npx react-native bundle --reset-cache --entry-file index.js --bundle-output $PUSH_DIR/index.android.bundle --platform android --assets-dest $PUSH_DIR --dev false

echo "-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- to start generating CodePushHash file -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --"
PUSH_PWD="$(pwd)/CodePush"
node ./node_modules/@lyg-react-native/code-push/scripts/generateBundledResourcesHash.js "$PUSH_PWD" "$PUSH_PWD/index.android.bundle" "$PUSH_PWD"

mkdir "$(pwd)/android/src/main/assets"

cp -r "${PUSH_PWD}/assets" $(pwd)/android/src/main
cp -r "${PUSH_PWD}/index.android.bundle" "$(pwd)/android/src/main/assets"
cp -r "${PUSH_PWD}/CodePushHash" "$(pwd)/android/src/main/assets"
cp -r "${PUSH_PWD}/raw" "$(pwd)/android/src/main/res"
cp -r "${PUSH_PWD}/drawable-hdpi" "$(pwd)/android/src/main/res"
cp -r "${PUSH_PWD}/drawable-mdpi" "$(pwd)/android/src/main/res"
cp -r "${PUSH_PWD}/drawable-xhdpi" "$(pwd)/android/src/main/res"
cp -r "${PUSH_PWD}/drawable-xxhdpi" "$(pwd)/android/src/main/res"
cp -r "${PUSH_PWD}/drawable-xxxhdpi" "$(pwd)/android/src/main/res"

echo -e "\ n,,,,,,,,,,,,,,,,,,,,,,,,,,,,, Android has been completed,,,,,,,,,,,,,,,,,,, \ n"

Copy the code

Start hot update

  • Normal hot update operations

  • On the second hot watch you will find an extra hotcodepush.json file

{"deletedFiles": []."patchedFiles": ["CodePush/index.android.bundle"]}
Copy the code

  • And index.android.bundle is tiny

  • It will be particularly fast when the hot update is not triggered for the first time, which greatly reduces the failure of hot update caused by network environment problems, and can quickly respond to the results of hot update. It is particularly important to solve urgent bugs.

collection

React-native code-push is optimized for first incremental heat optimization

React-native code-push non-first heat more bundle increments

reference

CodePush supports multiple packages — loading bundles for different businesses