hybrid探索與實現

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運行時邏輯,大致的思路:

1.h5工程打包完成的靜態資源通過離線包管理工具壓縮上傳至cdn和離線包管理平臺;
2.app通過接口獲取需要離線加載的資源包配置規則;
3.當h5命中需要離線的資源後,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.總結

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

 

作者|王卓 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章