1.背景動機
1.1
hybrid是什么
hybrid混合開發是一種離線移動應用開發方式，它結合了Web技術和原生技術，以網頁的形式嵌入到一個原生容器中，
1.2
為什么選擇hybrid
1.實作更豐富的用戶體驗，hybrid app可以呼叫設備原生功能，如攝像頭、定位、藍牙等，提供更豐富的用戶體驗，這直接滿足了用戶使用app的需求，
2.更快速地獲取新功能，通過熱更新，用戶無需手動更新app就可以獲取最新的功能和內容，這大大提高了用戶使用體驗，用戶無需等待新版本發布就可以使用新功能，
3.統一的互動界面，hybrid使用web技術開發界面,可以實作在iOS和Android平臺高度統一的界面和互動,這簡化了用戶的學習成本，用戶無需適應不同平臺下界面差異帶來的使用障礙，
4.更廣泛覆寫用戶，一套hybrid代碼可以發布到iOS和Android多個平臺,這覆寫更廣泛的用戶群體，無論用戶使用什么手機系統，都能使用該app，這提高了用戶使用可及性，
2.整體架構
在整體架構上主要涉及到了離線包管理平臺、app運行時邏輯，大致的思路：
2.1
離線包管理系統
?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(組態檔) 資源包組態檔:
-
h5Id-對應h5應用唯一標識
-
version-版本號
-
webpages-需要匹配替換的網頁串列
-
resources-需要匹配替換的靜態資源串列
-
web3d_t-需要匹配替換的3d資源
{
"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
容器系統
?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. 下載離線資源失敗；
3.總結
目前這個方案已經在我們的專案中實際使用，實作了與業務的無縫融合，解決了頁面加載性能問題、白屏問題，大大提升了用戶的使用體驗，
作者|王卓
本文來自博客園，作者：古道輕風，轉載請注明原文鏈接：https://www.cnblogs.com/88223100/p/Exploration-and-Implementation-of-Hybrid.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/553681.html
標籤：Android
上一篇：From Java To Kotlin：空安全、擴展、函式、Lambda很詳細，這次終于懂了
下一篇：返回列表