iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 29
0
Modern Web

React Native 航向真全端,建構雙平台 App系列 第 29

React Native App 遠端更新程式 Code Push (二)

  • 分享至 

  • xImage
  •  

我們在 Code Push (一),已經把 Code Push 安裝好並註冊了,那樣怎麼使用呢?
這邊介紹幾個 Code Push 提供的基本功能

  • checkForUpdate - 這個方法能得知當前版本是不是最新版本的 Bundle
  • getCurrenPackage - 這個方法能得知當前版本 Bundle 的詳細資訊
  • sync - 使用 Code Push 預設的更新流程,主要是會彈出視窗詢問使用者要不要更新

知道了這幾個功能後,我們就能動手實作拉
我們在進入點的地方

import CodePush from 'react-native-code-push';

並且在 React 生命中期當中的 componentDidMount() 執行流程

componentDidMount() {
    CodePush.sync({ updateDialog: true, installMode: CodePush.InstallMode.IMMEDIATE },
      (status) => {
        switch (status) {
          case CodePush.SyncStatus.DOWNLOADING_PACKAGE:
            this.setState({showDownloadingModal: true});
            break;
          case CodePush.SyncStatus.INSTALLING_UPDATE:
            this.setState({showInstalling: true});
            break;
          case CodePush.SyncStatus.UPDATE_INSTALLED:
            this.setState({showDownloadingModal: false});
            break;
        }
      },
      ({ receivedBytes, totalBytes, }) => {
          this.setState({downloadProgress: receivedBytes / totalBytes * 100});
      }
    );
  }

這裡我們除了使用 Code Push 的更新流程外,我們還加了進度條和彈出通知讓使用者知道,否則原先的更新流程會直接關閉 App 並打開,這樣子會讓使用者誤以為 Crash 了,這部分接上去後就能開始試試看更新摟。

我們可以隨便改一個 UI 文字,然後去 info/plist 更改 Bundle versions string, short 的版號,過來下指令 code-push release-react HelloRN ios 部署新版的 Bundle ,最後重新打開 App 他如果詢問你要不要更新那就是完成了,非常簡單吧。

完成結果:

這裡有一個小雷提醒,Apple 上架的時候如果發現你有彈出更新的 Dialog 他可是會 reject 的,所以 IOS 的部分 sync 裡面的 updateDialog 要設定為 false 才上架。

當然這種 Hot deploy 也不是無敵的,如果你有更新一些需要 link 的套件或是新增圖片資源、icon 等等的靜態資料,那就要上架新版本的 App 並且 Bundle 要改為大版號,不然舊 App 使用者可是會 Crash 的。


有問題歡迎來 React Native Taiwan 問喔
[創科資訊](https://www.facebook.com/trunk.studio.tw/?fref=ts


上一篇
React Native App 遠端更新程式 Code Push (一)
下一篇
React Native 好用套件分享
系列文
React Native 航向真全端,建構雙平台 App30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言