1. 程式人生 > >微軟的React Native熱更新

微軟的React Native熱更新

官方相關資源:

iOS的部署方式:

Android的部署方式:

我的步驟:

1、安裝code push 的 react native的sdk

npm install --save react-native-code-push@latest
react-native link react-native-code-push

2、安裝code push的cli,以及註冊登入code push賬號

npm install -g code-push-cli
code-push register

如果已經註冊過使用

code-push login

會開啟瀏覽器,我是選擇github賬號登入,在命令列貼上token,回車即可登入。
登入成功會返回:

Successfully logged-in. Your session file was written to /Users/hfmoney/.code-push.config. You can run the code-push logout command at any time to delete this file and terminate your session.

3、註冊應用以及管理應用:
註冊應用:

code-push app add <appName>

不同平臺使用不同的名字,比如android和ios兩個平臺就建立兩個應用,MyProjectAndroid和MyProjectIOS。
註冊成功會返回:


Paste_Image.png

staging代表開發版的熱更新部署,production代表生產版的熱更新部署。
在ios中,將staging的部署key複製在info.plist的CodePushDeploymentKey值中。
在android中,複製在Application的getPackages的CodePush構造中。

NOTE: As a reminder, you can retrieve these keys by running code-push deployment ls <APP_NAME> -k from your terminal.

4、整合RN

import codePush from "react-native-code-push";
...
@codePush
export default class App extends Component {
  ...
}

By default, CodePush will check for updates on every app start. If an update is available, it will be silently downloaded, and installed the next time the app is restarted (either explicitly by the end user or by the OS), which ensures the least invasive experience for your end users.

5、打release包,然後在修改rn程式碼或者rn方的圖片資源等。

6、釋出rn的bundle到微軟伺服器:

code-push release-react <AppName> <PlatName>

會自動先執行:"react-native bundle" 命令打包:

code-push release-react MyProject ios
node node_modules/react-native/local-cli/cli.js bundle --assets-dest /var/folders/g5/f8hqh2bn3dl9942583b0c7tr0000gn/T/CodePush --bundle-output /var/folders/g5/f8hqh2bn3dl9942583b0c7tr0000gn/T/CodePush/main.jsbundle --dev false --entry-file index.ios.js --platform ios

打包完成後會自動上傳到熱更新伺服器:

Releasing update contents to CodePush

Upload progress:[==================================================] 100% 0.0s
Successfully released an update containing the "/var/folders/g5/f8hqh2bn3dl9942583b0c7tr0000gn/T/CodePush" directory to the "Staging" deployment of the "MyProjectIOS" app.

7、檢視釋出的歷史記錄:

code-push deployment histroy MyProjectIOS Staging

剛釋出:


Paste_Image.png


正在下載:


Paste_Image.png


下載完畢:


Paste_Image.png

熱更新成功。

Android和iOS的區別

1、if you are targeting both platforms it is recommended to create separate CodePush applications for each platform.
2、Android 的 release版本的釋出:打包APK
3、code-push release-react <AppName> <PlatName>注意平臺名稱。

code-push release-react <appName> <platform>
[--bundleName <bundleName>]
[--deploymentName <deploymentName>]
[--description <description>]
[--development <development>]
[--disabled <disabled>]
[--entryFile <entryFile>]
[--gradleFile <gradleFile>]
[--mandatory]
[--noDuplicateReleaseError]
[--outputDir <outputDir>]
[--plistFile <plistFile>]
[--plistFilePrefix <plistFilePrefix>]
[--sourcemapOutput <sourcemapOutput>]
[--targetBinaryVersion <targetBinaryVersion>]
[--rollout <rolloutPercentage>]

For more details about how the release-react command works, as well as the various parameters it exposes, refer to the CLI docs

熱更新的版本控制

版本中字首~,^,和沒有字首的區別: semver range expression.
官方的熱更新指定版本引數說明:TARGET BINARY VERSION PARAMETER
Android的版本檢視:The android.defaultConfig.versionName property in your build.gradle file
iOS的版本檢視:The CFBundleShortVersionString key in the Info.plist file
release-react時不指定targetBinaryVersion引數時,會從以上目錄下檢視版本號,並對該版本進行打包更新。

NOTE: If the app store version in the metadata files are missing a patch version, e.g. 2.0, it will be treated as having a patch version of 0, i.e. 2.0 -> 2.0.0.

code push提供的多種功能:


Paste_Image.png

NOTE: The debug command supports both emulators and devices for Android, but currently only supports listening to logs from the iOS simulator. We hope to add device support soon.

進階:

If an available update is mandatory, then it will be installed immediately, ensuring that the end user gets it as soon as possible.
使用者手動檢查更新:

const codePushOptions = { checkFrequency: codePush.CheckFrequency.MANUAL };
class App extends Component
{
  ...
  _onPress = () => {
        codePush.sync({
            updateDialog: true,
            installMode: codePush.InstallMode.IMMEDIATE
        });
  }
  ...
}

codePush.sync方法會去伺服器同步,詢問是否有可更新的包,如果有則會彈出確定框讓使用者選擇是否更新,如果沒有則沒反應,如果使用者同意更新則會去下載更新包,並且安裝好後及時失效,無需重新開啟應用生效。

If you would like your app to discover updates more quickly, you can also choose to sync up with the CodePush server every time the app resumes from the background.
從後臺拉起更新(每次resume都會去拉去最新版本,但是不會生效,下一次開啟應用才會生效):

const codePushOptions = { checkFrequency: codePush.CheckFrequency.ON_APP_RESUME };
...
@codePush(codePushOptions)
export default class App extends Component {
  ...
}

While the app is syncing with the server for updates, make use of the codePushStatusDidChange and/or codePushDownloadDidProgress event hooks to log down the different stages of this process, or even display a progress bar to the user.

常用code-push CLI

1、登陸:code-push login
2、檢視所有app:code-push app ls
3、新建app:code-push app add <appName>
4、重新命名app:code-push app rename <appName> <newAppName>
5、移除app:code-push app rm <appName>
6、檢視app的部署:code-push deployment ls <appName> [--displayKeys|-k]
7、檢視app的某個部署的釋出更新的歷史記錄:code-push deployment history <appName> <deploymentName> [--displayAuthor|-a]
8、釋出更新:code-push release-react <appName> <platform>
9、debug:code-push debug <platform>

參考的部落格