●●●

Native開發原生應用是手機操作系統廠商（目前主要是蘋果的iOS和google的Android）對外界提供的標準化的開發模式，他們對于native開發提供了一套標準化實現和優化方案。但是他們存在一些硬傷，比如App的發版周期偏長、有時無法跟上產品的更新節奏；靈活性差，如果有較大的方案變更，需要發版才能解決；如果存在bug，在當前版本修復的難度比較大（iOS的JSPatch方案和Android的Dex修復方案）;需要根據不同的平臺寫不同的代碼，iOS主要為object-c和swift，android為Java。

APP端的迭代過程中的最后一步，需要提交版本到應用市場（AppStore或安卓各市場）。APP端的需求中有一部分會有更新頻繁、業務需求動態等特點，需要用戶能夠及時更新。該場景下，H5能夠滿足此類特性的需求（更快、更簡便的服務，代碼可高度重用，服務發布方便等優點），能夠做到快速承載業務的更新，多端開發統一。因此現在越來越多的公司使用H5+Native的Hybrid模式來開發APP。

本文通過設計一種H5容器，在完成H5頁面的遠端載入之外，提供對H5頁面訪問加速、提高安全性的支持。同時設計H5的模版化，離線化完成H5頁面訪問加速；還有Native與H5的請求委托，將鑒權信息等部分接口委托至APP端，增加安全性。

?

●●●

方案概述

1. H5頁面模版化、離線化

H5頁面分為靜態、動態數據部分；目的是可以通過在APP端預先加載模版（靜態資源通過腳本自動打包到應用，首次安裝解壓處理），只請求動態數據部分，減少并發的請求數量，提高速度。

2. 模版打包

H5頁面除了動態數據部分，其他內容包括js、css、img等靜態資源預先被打包成模版包，同時APP端在合適的時機進行下載并緩存在本地。如果模版更新頻繁、全包的尺寸較大，應將公共資源單獨抽離，并采用增量包更新方式。

3. 模版更新策略

更新時機：推送通知（客戶端靜默更新）、app啟動、app回到? 前臺、定時周期性檢測更新、添加對象作為資源更新的監聽器更新模版，提供多維度的更新策略。（后期考慮基于長連接的消息推送更新模版）

更新策略：遠程模版配置和本地模版配置在模版版本和模版有效期上的比較。同時增加對模版的md5校驗，防止資源的篡改。

4. 資源攔截

H5容器加載模版，會加載引用的js、css、img等文件，H5容器需要對該類文件進行攔截，返回資源包中對應的文件；為了找到資源包中對應的文件，需要提供一份靜態資源的映射配置表。

5. JsBridge通道

實現Native與H5頁面的交互：業務協議接口的定義，管理頁? ? ? 面切換，與服務器的數據交互，APP端通用功能等。Native與H5的請求委托，將鑒權信息等部分接口委托至APP端，增加安全性。

6. 日志統計

包括H5性能指標，模版包的更新成功率，以及本地模版和遠程頁面訪問的占比，和一些異常日志的收集，然后統計上報，提供完善的日志統計。

?

?

●●●

詳細方案

1. 主流程

H5容器方案包括兩個主流程：

·???????模版更新流程：包括后端cms上傳及app同步

·???????模版訪問流程：設計App識別并訪問模版，H5與JS交互的流程

?

發布流程

模版發布流程如下圖所示：

·???????確定模版更新，并通知到QA

·???????QA測試模版包，確認無誤

·???????提交發布測試人，上傳CMS（上傳模版包至阿里云）

·???????CMS調用MobileServer接口，存入系統

·???????等待APP端同步到本地

模版加載時序圖：

2. 模版分類及識別

模版分類通過業務場景設定，并且可以通過wap url的特定字符串設別，例如:http://host/yougouPages/Cart?xxx=111

其中yougouPages/Cart即模版識別串（detectKey），容器加載到該url后，通過detectKey確定是否加載已經存在的對應的模版。

3. 配置信息管理

所有模版在MobileServer上維護一份信息（templateInfo）

包括全量包和增量包下載地址，模版包的版本，識別字符串，模版id，模版更新時間戳，模版有效截止時間戳，模版狀態（用于下線模版識別，解決突發問題）

4. APP端H5容器對離線資源的重定位

模版資源打包時，需要形成一份url->localPath的映射表：

后續考慮對資源映射進行加密處理，防止被篡改。

5. H5與APP交互

考慮到H5對APP端的硬件信息、鑒權信息，請求信息等的依賴，H5Container需要為H5提供接口，提供對應的信息。所有通過模版加載的url，帶上額外參數http://host/subpath?&ish5container=1,H5頁面可根據該參數確定相應的初始化工作。

時序圖：

?

6. JsBridge接口描述

JsBridge作為native與js的信息交互的通道。提供最基本的方法調用的接口。APP需要進行業務維度的封裝，暴露出接口。

7. 模版使用策略

模版的使用過程，在某些情況下不適合使用模版，或為了解決模版在特定場景有問題，決定停止使用。因此需要定義模版的使用條件。模版配置信息增加：vaildTs，offine，exception

8. 容器性能指標

9. 容器增量包方案

?

10. 框架結構

11.H5容器構成

?

?

——【特別推薦】——

短信效果不好？試試這幾招

總結

以上是生活随笔為你收集整理的H5容器技术方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。