hybrid探索與實現

hybrid混合開發是一種離線移動應用開發方式，它結合了Web技術和原生技術，以網頁的形式嵌入到一個原生容器中。

1.實現更豐富的用戶體驗。hybrid app可以調用設備原生功能，如攝像頭、定位、藍牙等，提供更豐富的用戶體驗，這直接滿足了用戶使用app的需求。

2.更快速地獲取新功能。通過熱更新，用戶無需手動更新app就可以獲取最新的功能和內容，這大大提高了用戶使用體驗，用戶無需等待新版本發佈就可以使用新功能。

3.統一的交互界面。hybrid使用web技術開發界面,可以實現在iOS和Android平臺高度統一的界面和交互,這簡化了用戶的學習成本，用戶無需適應不同平臺下界面差異帶來的使用障礙。

4.更廣泛覆蓋用戶。一套hybrid代碼可以發佈到iOS和Android多個平臺,這覆蓋更廣泛的用戶群體，無論用戶使用什麼手機系統，都能使用該app，這提高了用戶使用可及性。

在整體架構上主要涉及到了離線包管理平臺、app運行時邏輯，大致的思路：

►2.1.1離線包管理平臺

1. 提供離線配置能力，app、h5接入控制與管理、應用離線能力開關；

2. 提供離線包版本管理，版本號、發佈時間查看、版本回退操作；

3. 離線包的發佈，app配置文件的更新，每次離線包發佈會同步更新對應客戶端配置文件；

►2.1.2離線包管理工具

1. 打包發佈腳本發佈到之家私有源，以腳手架命令形式調用，提供打包、上傳命令；

2. 業務方結合自身編譯上線流程進行調用，上傳完成則自動進行發佈；

3. 前端靜態資源按照頁面/工程緯度打包成zip；

4. zip包含js/css/img/pages/config.json配置文件；

腳本安裝:

// 腳本安裝
npm i @auto/dt-fe-cli
// 指定腳本的配置文件，打包並上傳至伺服器，預設配置文件為 config.json，可以使用 --config 指定配置文件
dt-fe-cli offline --config hybrid-config.json

h5id
├── js/
├── css/
├── img/
├── pages
│   ├── index.html
│   └── list.html
└── config.json(配置文件) 

{
  "id": "432e53f06a",
  "h5Id": "432e53f06a",
  "version": "1.0.19",
  "webpages": [
    {
      "remoteUrl": "nets.xxx.com.cn/direction/68000",
      "path": "432e53f06a/1.0.19/direction/index.html",
      "contentType": "text/html"
    }
  ],
  "resources": [
    {
      "remoteUrl": "nets.xxx.com.cn/direction/css/2dScene.css",
      "path": "432e53f06a/1.0.19/direction/css/2dScene.css",
      "contentType": "text/css"
    },
    ...
  ],
  "appRules": {
    "ios": [
      "11.39.0",
      "infinite"
    ],
    "android": [
      "11.39.0",
      "infinite"
    ]
  },
  "web3d_t": [
    {
      "remoteUrl": "vrs3.xxx.cn/xxxx/vr_exhibition/q1VIB86H/Lsmt_FG01_ChaoPin",
      "downloadUrl": "https://vrs3.xxx.cn/xxxx/VR/MtHLNe/Lsmt_FG01_ChaoPin.zip",
      "path": "432e53f06a/1.0.19/Lsmt_FG01_ChaoPin"
    },
    ...
  ],
  "url": "http://nfiles3three.xxx.com.cn/mefcdn-xxxx/dt-fe-cli/offline/432e53f06a-1.0.19.zip"
}

►2.1.3發佈流程

1.在代碼打包編譯階段添加dt-fe-cli offline命令根據配置文件、靜態資源，生成資源包的資源映射配置，將靜態資源打包並上傳至後臺伺服器；

2.上傳至管理平臺的資源包會更新關聯測試環境應用的離線包配置信息，用於測試驗證；

3.測試驗證通過之後調用管理平臺發佈介面將驗證通過的離線包發佈至線上；

►2.2.1webview管理

1.設置特定路由協議開啟容器；

2. 通過webclient攔截器攔截H5所有資源請求，匹配本地緩存邏輯：命中緩存時直接返回本地資源；未命中緩存則轉發給WebView進行預設處理；

3. 關閉Webview時檢查更新-監聽頁面關閉事件，關閉頁面時觸發預載入邏輯及離線包管理邏輯；

►2.2.2離線包管理

1. 檢查更新：調用預載入介面，結合離線包管理平臺邏輯，處理離線包更新；

2. 離線包下載：本地開啟多線程併發下載離線包，監聽下載結果，處理離線包解壓等流程；

3. 磁碟空間管理

（1）壓縮包解壓完成後刪除壓縮包；

（2）離線包更新後清理舊版本資源；

（3）設置離線包空間上限，結合LRU演算法進行離線包空間管理；

►2.2.3環境區分

1. 為了在測試階段快速判斷是否命中離線包資源；

2. 測試環境當html命中離線邏輯時，客戶端通過webview註入指定的js；

3. js在頁面插入浮動元素，標識當前頁面是否命中離線資源，標識區分2d/3d離線資源；

►2.2.4更新時機

1. 第一次冷啟動，app冷啟動20s後全量下載離線包；

2. 關閉webview後會更新資源；

3. 掃碼打開webview會立即下載當前url的離線資源包；

►2.2.5容災

當容器觸發以下情況時如果當前h5離線包存在會使用離線包資源，否則會使用線上資源；

1. 包解壓失敗；

2. 介面超時，離線包下載在網路狀態不好時，會有下載失敗的情況；

3. 下載離線資源失敗；

目前這個方案已經在我們的項目中實際使用，實現了與業務的無縫融合，解決了頁面載入性能問題、白屏問題，大大提升了用戶的使用體驗。

作者|王卓