React-Native热更新

 

安装环境：

React-native 0.63.3

React-native-code-push 0.6.3

• 全局安装 App Center CLI

第一步全局安装appcenter的脚手架，通过npm安装，（国内用户可能会比较慢，请添加淘宝镜像）

npm install -g appcenter-cli

 

• 登录appcenter

* 首次登录

执行appcenter login 数秒后会打开浏览器，需要先登录，登陆后显示授权码，复制授权码粘贴到终端回车

* 已登录（登陆后，后面如果不退出，不需要再次登录）

执行appcenter login 数秒后会打开浏览器并显示授权码，复制授权码粘贴到终端回车

• 添加(创建)项目

分别创建android和ios 应用到appcenter:

 

appcenter apps create -d 项目名-android -o Android -p React-Native

appcenter apps create -d 项目名-ios -o iOS -p React-Native

 

例子：

appcenter apps create -d xmzj-android -o Android -p React-Native

appcenter apps create -d xmzj-ios -o iOS -p React-Native

 

 

 

四、检查是否添加成功

appcenter apps list

 

 

五、部署 （生成key）

appcenter codepush deployment add -a 账号/应用名称Staging

 

例子：

appcenter codepush deployment add -a 账号/xmzj-android Staging

appcenter codepush deployment add -a 账号/xmzj-android Production

 

查看部署码：

appcenter codepush deployment list -a 账号/应用名称 -k

 

• 添加 CodePush SDK 到app

安卓部分：

 1、Android:（react-native version大于 0.60）

1）项目目录下安装react-native-code-push

npm install --save react-native-code-push

注意：（如果没有现成项目需要先react-native init创建项目，然后进行1）

2）在 android/settings.gradle文件添加

include ':app', ':react-native-code-push'

project(':react-native-code-push').projectDir = new File(rootProject.projectDir,'../node_modules/react-native-code-push/android/app')

 

3）在 android/app/build.gradle文件，在react.gradle后面追加codepush.gradle

apply from: "../../node_modules/react-native/react.gradle"

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

 

4）更新MainApplication.java文件

import com.microsoft.codepush.react.CodePush;

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {

  @Override

protected String getJSBundleFile() {

return CodePush.getJSBundleFile();

}

  };

}

 

 

 

1. 在android { buildTypes {} }中添加staging  和production key（登录appcenter获取或者执行appcenter codepush deployment list -a 账号/应用名 -k）

android {

    buildTypes {

        debug {

            resValue "string", "CodePushDeploymentKey", '""'

        }

        releaseStaging {

            resValue "string", "CodePushDeploymentKey",’这里添加stageing的key’

            matchingFallbacks = ['release']

            

        }

        release {

            resValue "string", "CodePushDeploymentKey", '这里添加production的key'

        }

    }

}

 

 

注意：配置完成如找不到react-native-code-push在android/app/build.gradle增加以下配置

project.ext.react = [

    enableHermes: false,  // clean and rebuild if changing

    entryFile: "index.js",

    bundleAssetName: "index.android.bundle",

    bundleInDebug: true,

    bundleInRelease: true

]

 

当然 如果由于项目过大导致无法启动，可对安卓项目项目进行分包处理

 

 

 

 

1. 发布更新

 

appcenter codepush release-react -a 账号/项目名 --t 版本号 -d Production -m false --description "1.测试"

 

其中参数–t为二进制(.ipa与apk)安装包的的版本；–d是要发布更新的环境分Production与Staging(默认为Staging)；–description 为更新说明；–m 是强制更新

 

例子：

appcenter codepush release-react -a 账号/项目名-ios -d Stageing

appcenter codepush release-react -a 账号/项目名-android -d Staging

 

iOS配置

稍后补充。。。

 

 

 

1. 顶层api

allowRestart 允许重启更新

disallowRestart 不允许重启

checkForUpdate 检查是否有可用的更新

getUpdateMetadata 检索已安装更新的元数据（如description，必选）

notifyAppReady 通知CodePush运行时已安装的更新被视为成功。如果您正在手动检查和安装更新（不是使用sync方法为您处理所有更新），则必须调用此方法；否则，CodePush会将更新视为失败，并在应用程序下次重新启动时回滚到以前的版本。

restartApp 立即重新启动应用程序。如果有一个更新挂起，它将立即显示给最终用户。否则，调用此方法与最终用户终止并重新启动进程的行为相同。

sync 允许检查更新、下载和安装，所有操作都只需一次调用

 

 

<1>静默更新：

应用程序启动时的静默同步（最简单的默认行为）。你的应用程序将自动下载可用的更新，并在下次应用程序重新启动时应用这些更新（如操作系统或最终用户终止了它，或设备重新启动）。这样，整个更新体验对最终用户来说是“无声的”，因为他们看不到任何更新提示和/或“合成”应用程序重新启动。

class MyApp extends Component {} MyApp = codePush(MyApp);

 

<2>从后端进入前台更新：

每次应用程序恢复时进行静默同步。与1相同，除了我们检查更新，或者在每次应用程序“后台”后返回前台时应用一个更新（如果存在）。

 

class MyApp extends Component {}

MyApp = codePush({ checkFrequency: codePush.CheckFrequency.ON_APP_RESUME, installMode: codePush.InstallMode.ON_NEXT_RESUME })(MyApp);

 

<3>询问用户，同意立即更新

互动的。当更新可用时，请在下载之前提示最终用户获得权限，然后立即应用更新。如果使用强制标志发布更新，最终用户仍然会收到有关更新的通知，但他们不能选择忽略它。

class MyApp extends Component {} MyApp = codePush({ updateDialog: true, installMode: codePush.InstallMode.IMMEDIATE })(MyApp);

 

<4>记录/显示进度

记录/显示进度。当应用程序与服务器同步以进行更新时，请使用codePushStatusDidChange和/或codePushDownloadDidProgress事件钩子记录此过程的不同阶段，甚至向用户显示进度条。

 

class MyApp extends Component {

codePushStatusDidChange(status) {

switch(status) {

 case codePush.SyncStatus.CHECKING_FOR_UPDATE:

console.log("正在检查更新...");

break;

case codePush.SyncStatus.DOWNLOADING_PACKAGE:

console.log("正在下载安装包");

 break;

case codePush.SyncStatus.INSTALLING_UPDATE:

console.log("正在安装更新");

 break;

case codePush.SyncStatus.UP_TO_DATE:

 console.log("更新到最新");

break;

 case codePush.SyncStatus.UPDATE_INSTALLED:

console.log("已安装更新");

break;

 }

}

codePushDownloadDidProgress(progress) {

console.log(progress.receivedBytes + " of " + progress.totalBytes + " received.");

 }

}

MyApp = codePush(MyApp);

 

CodePushOptions

 

<1>codePush.CheckFrequency.

检查频率

//ON_APP_RESUME APP恢复到前台的时候

//ON_APP_START APP开启的时候

//MANUAL 手动检查

<2>deploymentKey（String）

指定要查询更新的部署密钥。默认情况下，此值从信息列表文件（iOS）和java.main活动文件（Android），但如果需要动态使用不同的部署，则此选项允许您从脚本端重写它

 

<3>codePush.InstallMode

指定何时安装可选更新（未标记为必需的更新)

默认为codePush.InstallMode.ON_NEXT_RESTART. 有关可用选项及其作用的说明，请参阅InstallMode enum参考。

 

//ON_NEXT_RESUME 下次恢复到前台时

//ON_NEXT_RESTART 下一次重启时

//IMMEDIATE 马上更新

 

<4>mandatoryInstallMode动态安装模式

 

<5>minimumBackgroundDuration (Number) 默认值为0，  指定重新启动应用程序之前应用程序需要在后台运行的最小秒数。

此属性仅适用于使用安装的更新 InstallMode.ON_NEXT_RESUME or InstallMode.ON_NEXT_SUSPEND 时使用

 

<6>uploadDialog一个“选项”对象，用于确定当更新可用时，是否应向最终用户显示确认对话框

 

//是否显示更新描述

                    appendReleaseDescription : true ,

                    //更新描述的前缀。 默认为"Description"

                    descriptionPrefix : "更新内容：" ,

                    //强制更新按钮文字，默认为continue

                    mandatoryContinueButtonLabel : "立即更新" ,

                   //强制更新时的信息. 默认为"An update is available that must be installed."

                    mandatoryUpdateMessage : "必须更新后才能使用" ,

                    //非强制更新时，按钮文字,默认为"ignore"

                    optionalIgnoreButtonLabel : '稍后' ,

                    //非强制更新时，确认按钮文字. 默认为"Install"

                    optionalInstallButtonLabel : '后台更新' ,

                    //非强制更新时，检查到更新的消息文本

                    optionalUpdateMessage : '有新版本了，是否更新？' ,

                    //Alert窗口的标题

                    title : '更新提示'

 

 

 

详细请参考appcenter官网：https://docs.microsoft.com/en-us/appcenter/distribution/codepush/