【網易雲信】H5 容器技術方案

Native 開發原生應用是手機操做系統廠商（目前主要是蘋果的 iOS 和 Google 的 Android）對外界提供的標準化的開發模式，他們對於 Native 開發提供了一套標準化實現和優化方案。可是他們存在一些硬傷，好比 App 的發版週期偏長、有時沒法跟上產品的更新節奏；靈活性差，若是有較大的方案變動，須要發版才能解決；若是存在 bug，在當前版本修復的難度比較大（iOS 的 JSPatch 方案和 Android 的 Dex 修復方案）;須要根據不一樣的平臺寫不一樣的代碼，iOS 主要爲 Object-C 和 Swift，Android 爲 Java。

APP端的迭代過程當中的最後一步，須要提交版本到應用市場（App Store 或安卓各市場）。App 端的需求中有一部分會有更新頻繁、業務需求動態等特色，須要用戶可以及時更新。該場景下，H5 可以知足此類特性的需求（更快、更簡便的服務，代碼可高度重用，服務發佈方便等優勢），可以作到快速承載業務的更新，多端開發統一。所以如今愈來愈多的公司使用 H5+Native 的 Hybrid 模式來開發 App。

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

方案概述

• H5 頁面模版化、離線化

H5 頁面分爲靜態、動態數據部分；目的是能夠經過在 App 端預先加載模版（靜態資源經過腳本自動打包到應用，首次安裝解壓處理），只請求動態數據部分，減小併發的請求數量，提升速度。

• 模版打包

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

• 模版更新策略

更新時機：推送通知（客戶端靜默更新）、App 啓動、App 回到 前臺、定時週期性檢測更新、添加對象做爲資源更新的監聽器更新模版，提供多維度的更新策略。（後期考慮基於長鏈接的消息推送更新模版）
更新策略：遠程模版配置和本地模版配置在模版版本和模版有效期上的比較。同時增長對模版的 md5 校驗，防止資源的篡改。

• 資源攔截

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

• JsBridge 通道

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

• 日誌統計

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

詳細方案

• 一、主流程

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

1. 模版更新流程：包括後端 cms 上傳及 App 同步
2. 模版訪問流程：設計 App 識別並訪問模版，H5 與 JS 交互的流程

發佈流程
模版發佈流程以下圖所示：

1. 肯定模版更新，並通知到 QA
2. QA 測試模版包，確認無誤
3. 提交發布測試人，上傳 CMS（上傳模版包至阿里雲）
4. CMS 調用 MobileServer 接口，存入系統
5. 等待 App 端同步到本地

模版加載時序圖：

• 二、模版分類及識別

模版分類經過業務場景設定，而且能夠經過 wap url 的特定字符串設別，例如：http://host/yougouPages/Cart?...
其中 yougouPages/Cart 即模版識別串（detectKey），容器加載到該 url 後，經過 detectKey 肯定是否加載已經存在的對應的模版。

• 三、配置信息管理

全部模版在 MobileServer 上維護一份信息（templateInfo），包括全量包和增量包下載地址，模版包的版本，識別字符串，模版
id，模版更新時間戳，模版有效截止時間戳，模版狀態（用於下線模版識別，解決突發問題）

• 四、App 端 H5 容器對離線資源的重定位

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

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

• 五、H5 與 App 交互

考慮到 H5 對 App 端的硬件信息、鑑權信息，請求信息等的依賴，H5Container 須要爲 H5 提供接口，提供對應的信息。全部經過模版加載的 url，帶上額外參數 http://host/subpath?&ish5cont...，H5 頁面可根據該參數肯定相應的初始化工做。

時序圖：

• 六、JsBridge 接口描述

JsBridge 做爲 Native 與 js 的信息交互的通道，提供最基本的方法調用的接口。App 須要進行業務維度的封裝，暴露出接口。

• 七、模版使用策略

模版的使用過程，在某些狀況下不適合使用模版，或爲了解決模版在特定場景有問題，決定中止使用。所以須要定義模版的使用條件。模版配置信息增長：vaildTs，offine，exception。

---

隨着音頻處理和壓縮技術的不斷髮展，效果更好、適用範圍更廣、性能更高的算法和新的技術必將不斷涌現，若是你有好的技術或者分享，歡迎關注網易 MC 官方博客以及微信公衆號：

關注更多技術乾貨內容： 網易雲信博客
歡迎關注 網易雲信 GitHub
歡迎關注 網易雲信官網

官網微信公衆號：