React Native之code-push的熱更新(ios android)

時間  2019-11-17
標籤 react native code push 更新 ios android 欄目 React 简体版
原文   原文鏈接

React Native之code-push的熱更新(ios android)

React Native支持你們用React Native技術開發APP，並打包生成一個APP。在動態更新方面React Native只是提供了動態更新的基礎，對將應用部署到哪裏，如何進行動態更新並無支持的那麼完善。好在微軟開發了CodePush，填補React Native 應用在動態更新方面的空白。CodePush 是微軟提供的一套用於熱更新 React Native 和 Cordova 應用的服務。下面將向你們分享如何使用CodePush實時更新你的應用。java

一,CodePush簡介

CodePush 是微軟提供的一套用於熱更新 React Native 和 Cordova 應用的服務。
CodePush 是提供給 React Native 和 Cordova 開發者直接部署移動應用更新給用戶設備的雲服務。CodePush 做爲一箇中央倉庫，開發者能夠推送更新 (JS, HTML, CSS and images)，應用能夠從客戶端 SDK 裏面查詢更新。CodePush 可讓應用有更多的可肯定性，也可讓你直接接觸用戶羣。在修復一些小問題和添加新特性的時候，不須要通過二進制打包，能夠直接推送代碼進行實時更新。node

CodePush 能夠進行實時的推送代碼更新：react

  • 直接對用戶部署代碼更新
  • 管理 Alpha，Beta 和生產環境應用
  • 支持 React Native 和 Cordova
  • 支持JavaScript 文件與圖片資源的更新

CodePush開源了react-native版本，react-native-code-push託管在GitHub上。android

二,安裝與註冊CodePush

2.1,安裝 CodePush CLI

在終端輸入以下：ios

1 npm install -g code-push-cli
1  code-push -v //查看版本

2.2,建立一個CodePush 帳號

1 code-push register

在終端輸入code-push register，會打開註冊頁面讓你選擇受權帳號。受權經過以後，CodePush會告訴你「access key」，複製此key到終端便可完成註冊。 https://appcenter.ms/git

三,集成CodePush SDK

第一步：在項目中安裝 react-native-code-push插件，終端進入你的項目根目錄而後運行github

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

3.1,Android集成SDK

第二步： 運行 npm link react-native-code-push。這條命令將會自動幫咱們在anroid文件中添加好設置npm

第三步： 在 android/app/build.gradle文件裏面添以下代碼：react-native

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

若是第二步沒有成功，則手動配置app

1 ...
2 dependencies {
3 ...
4     implementation project(':react-native-code-push')
5  ...
6 }
7 ...

在/android/settings.gradle中添加以下代碼:

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

 

在/android/app/src/com/.../.../MainApplication.java中添加以下代碼:

 1 ...
 2 import com.microsoft.codepush.react.CodePush;
 3 
 4 ...
 5 
 6   @Override
 7         protected String getJSBundleFile() {
 8             return CodePush.getJSBundleFile();
 9         }
10 
11 ...
12 
13    @Override
14         protected List<ReactPackage> getPackages() {
15             return Arrays.<ReactPackage>asList(
16                ...
17                 new CodePush(CODEPUSH_KEY_STAGING, getApplicationContext(), BuildConfig.DEBUG)
18             );
19         }
20 ...

第四步: 運行 code-push deployment -k ls <appName>獲取 部署祕鑰。默認的部署名是 staging，因此 部署祕鑰（deployment key ） 就是 staging。

第五步： 添加配置。當APP啓動時咱們須要讓app向CodePush諮詢JS bundle的所在位置，這樣CodePush就能夠控制版本。更新 MainApplication.java文件：

 1 public class MainApplication extends MultiDexApplication implements ReactApplication {
 2 
 3     private final String CODEPUSH_KEY_PRODUCTIO = "ZaHJQhSDR7XVGMMjzbQnc686dbac";
 4     private final String CODEPUSH_KEY_STAGING = "wiIxKA1Hp7g3Tb5Phytc686dbac-";
 5     private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
 6 
 7 
 8 
 9         @Override
10         protected String getJSBundleFile() {
11             return CodePush.getJSBundleFile();
12         }
13 
14         @Override
15         public boolean getUseDeveloperSupport() {
16             return BuildConfig.DEBUG;
17         }
18 
19         @Override
20         protected List<ReactPackage> getPackages() {
21             return Arrays.<ReactPackage>asList(
22                 new CodePush(CODEPUSH_KEY_STAGING, getApplicationContext(), BuildConfig.DEBUG)
23             );
24         }
25 
26         @Override
27         protected String getJSMainModuleName() {
28             return "index";
29         }
30     };
31 
32     @Override
33     public ReactNativeHost getReactNativeHost() {
34         return mReactNativeHost;
35     }
36 
37 }

第六步：修改versionName。
在 android/app/build.gradle中有個 android.defaultConfig.versionName屬性，咱們須要把 應用版本改爲 0.0.1（默認是1.0，可是codepush須要三位數）。

1 android{
2     defaultConfig{
3         versionName "0.0.1"
4     }

3.2,iOS集成

第二步： 運行 rnpm link react-native-code-push。這條命令將會自動幫咱們在ios中添加好設置

在終端運行此命令以後，終端會提示讓你輸入deployment key，這是你只需將你的deployment Staging key輸入進去便可，若是不輸入則直接單擊enter跳過便可。

若是第二部沒有成功則手動link 。

1,首先在node_modules 中找到這個codepush 文件，而後拖進去以下圖

 

 

2,特別注意一點因爲這個庫須要一個link 一個靜態庫（libz）以下圖所示

3,添加codepush的頭文件路徑，在 header Search Paths 中添加這句

1 $(SRCROOT)/../node_modules/react-native-code-push/ios/CodePush

 

第三步： 在build Settings頁籤中單擊 + 按鈕而後選擇添加User-Defined Setting，而後輸入CODEPUSH_KEY(名稱隨意)，而後填入deployment key：

 

第四步：打開 Info.plist文件，在CodePushDeploymentKey中輸入$(CODEPUSH_KEY)，並修改Bundle versions爲三位

 

四,使用CodePush

4.1,codepush經常使用命令

  1. 安裝 CodePush CLI: npm install -g code-push-cli
  2. 建立一個CodePush 帳號: code-push register
  3. 登錄：code-push login
  4. 註銷：code-push loout
  5. 列出登錄的token: code-push access-key ls
  6. 刪除某個 access-key: code-push access-key rm <accessKye>
  7. 建立一個app： code-push app add <appName> <os> <platform> 其中os爲ios或android，platform爲react-native
  8. 在帳號裏移除一個 app:code-push app remove 或者 rm
  9. 重命名一個存在 app: code-push app rename
  10. 列出帳號下面的全部 app: code-push app list 或則 ls
  11. 把app的全部權轉移到另一個帳號:code-push app transfer
  12. 直接使用下面的命令查到對應應用的deployment key: code-push deployment ls <appName> -k
  13. 部署:code-push deployment add <appName>
  14. 重命名:code-push deployment rename <appName>
  15. 刪除部署:code-push deployment rm <appName>
  16. 列出應用的部署狀況:code-push deployment ls <appName>
  17. 查看部署的key:code-push deployment ls <appName> -k
  18. 查看歷史版本:code-push deployment history <appName> <deploymentNmae> (Production 或者 Staging)
  19. 發佈熱更新：code-push release-react <appName> <os> --description "1.描述"
  20. 發佈熱更新:code-push release-react <appName> <os> -t 版本 -d 環境 --des 描述 -m true （強制更新）
  21. 刪除部署：code-push deployment rm <appName> <deploymentNmae> deploymentNmae(Production 或者 Staging)
  22. 清除歷史部署記錄 code-push deployment clear <appName> Production or Staging
  23. 回滾 code-push rollback <appName> Production --targetRelease v4(codepush服務部署的版本號)

4.2,更新方式

一、首先最簡單的一種就是  這種無聲的熱更新，也就是說熱更新不會給用戶任何提示，都在默默的進行更新，用戶徹底體會不到整個過程

classMyAppextendsComponent<{}> {}

MyApp= codePush(MyApp);

exportdefaultMyApp;

二、第二種 也是無聲更新，比第一種狀況多了一種就是熱更新每次會在後臺返回前臺的時候進行熱更新。這裏能夠看到幾個參數，

checkFrequency有三種狀態以下

ON_APP_START：  //在組件初始化的時候進行熱更新

ON_APP_RESUME：//在每次app從後臺回到前臺的時候進行熱更新

MANUAL：//不進行熱更新，須要本身手動配置

InstallMode 有以下幾種狀態

IMMEDIATE  ：// 安裝熱更新，而且重啓app

ON_NEXT_RESTART：  //下次啓動的時候啓動熱更新

ON_NEXT_RESUME  //從後臺回到前臺的時候啓動

ON_NEXT_SUSPEND：  在後臺的時候進行熱更新

classMyAppextendsComponent<{}> {}

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

exportdefaultMyApp;

updateDialog  當爲true 是，能夠在更新的時候提示用戶須要更新

4.3,codepush使用

1,登錄成功後，使用code-push app add <appName> <os> <platform>建立一個app,以下:

1 code-push app add Test-ios ios react-native

建立成功後會返回對應的deployment key，將其拷貝到對應的配置文件便可

iOS：

Android:

...

import java.util.Arrays;
import java.util.List;


public class MainApplication extends MultiDexApplication implements ReactApplication {

    private final String CODEPUSH_KEY_PRODUCTIO = "CuEhrwd_ZaHJ";
    private final String CODEPUSH_KEY_STAGING = "XoFT5uAm_wiI";
    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {

...

2,配置js

 1  CodePush.sync({
 2             updateDialog: {
 3                 //是否顯示更新描述
 4                 appendReleaseDescription : true ,
 5                 //更新描述的前綴。 默認爲"Description"
 6                 descriptionPrefix : '' ,
 7                 mandatoryUpdateMessage: '',
 8                 //強制更新按鈕文字，默認爲continue
 9                 mandatoryContinueButtonLabel : '當即更新' ,
10                 //非強制更新時，按鈕文字,默認爲"ignore"
11                 optionalIgnoreButtonLabel : '稍後',
12                 //非強制更新時，確認按鈕文字. 默認爲"Install"
13                 optionalInstallButtonLabel : '後臺更新',
14                 //非強制更新時，檢查到更新的消息文本
15                 optionalUpdateMessage : ' ' ,
16                 //Alert窗口的標題
17                 title : '更新提示'
18             },
19             mandatoryInstallMode: CodePush.InstallMode.IMMEDIATE,
20             deploymentKey: CODE_PUSH_STAGING,
21         },(status) => {
22             switch (status) {
23                 case CodePush.SyncStatus.CHECKING_FOR_UPDATE:
24                     //alert(CodePush.SyncStatus.CHECKING_FOR_UPDATE);
25                     break;
26                 // case CodePush.SyncStatus.AWAITING_USER_ACTION:
27                 //     alert('codePush.SyncStatus.AWAITING_USER_ACTION');
28                 //     break;
29                 case CodePush.SyncStatus.DOWNLOADING_PACKAGE:
30                     //應用更新中，請稍後...
31                     break;
32                 case CodePush.SyncStatus.INSTALLING_UPDATE:
33                     CodePush.allowRestart();
34                     break;
35                 case CodePush.SyncStatus.UP_TO_DATE:
36                    //當前已經是最新版本
37                     break;
38                 // case CodePush.SyncStatus.UPDATE_IGNORED:
39                 //     alert('codePush.SyncStatus.UPDATE_IGNORED');
40                 //     break;
41                 // case CodePush.SyncStatus.UPDATE_INSTALLED:
42                 //     alert('codePush.SyncStatus.UPDATE_INSTALLED');
43                 //     break;
44                 // case CodePush.SyncStatus.SYNC_IN_PROGRESS:
45                 //     alert('codePush.SyncStatus.SYNC_IN_PROGRESS');
46                 //     break;
47                 // case CodePush.SyncStatus.UNKNOWN_ERROR:
48                 //     alert('codePush.SyncStatus.UNKNOWN_ERROR');
49                 //break;
50             }
51         },

五,發佈更新

code-push release-react <appName> <os> --description "1.描述"

1 code-push release-react Test-ios ios --description "1.測試熱更新"
1 code-push release-react Test-android android --description "1.測試熱更新"

如下發布更新需手動打包：

code-push release <應用名稱> <Bundles所在目錄> <對應的應用版本> --deploymentName： 更新環境 --description： 更新描述 --mandatory： 是否強制更新 

1 react-native bundle --platform ios --entry-file index.js --bundle-output ./bundles/index.ios.bundle --dev false
2 
3 code-push release Test-ios ./bundles/index.ios.bundle 1.0.0 --description "1.測試熱更新" --mandatory false
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程