網易MC：H5容器技術方案

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. 模版使用策略

8. 容器性能指標

9. 容器增量包方案

10. 框架結構

11.H5容器構成

以上由網易企業信息化服務提供商，湖南領先網路科技整理髮布。

網易企業服務（qiye163.co）是網易憑藉其20年品牌優勢與經驗在企業郵箱的基礎上，為進一步布局企業市場而打造的企業級產品矩陣，致力於提供一站式企業信息化解決方案。湖南領先網路科技是網易企業產品授權經銷商，專業為企業提供網易企業郵箱、網易辦公套件等一站式企業信息化專業解決方案。辦理網易企業郵箱及旗下企業產品相關業務，就找湖南領先網路科技。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！