●●●

Native開(kāi)發(fā)原生應(yīng)用是手機(jī)操作系統(tǒng)廠商（目前主要是蘋(píng)果的iOS和google的Android）對(duì)外界提供的標(biāo)準(zhǔn)化的開(kāi)發(fā)模式，他們對(duì)于native開(kāi)發(fā)提供了一套標(biāo)準(zhǔn)化實(shí)現(xiàn)和優(yōu)化方案。但是他們存在一些硬傷，比如App的發(fā)版周期偏長(zhǎng)、有時(shí)無(wú)法跟上產(chǎn)品的更新節(jié)奏；靈活性差，如果有較大的方案變更，需要發(fā)版才能解決；如果存在bug，在當(dāng)前版本修復(fù)的難度比較大（iOS的JSPatch方案和Android的Dex修復(fù)方案）;需要根據(jù)不同的平臺(tái)寫(xiě)不同的代碼，iOS主要為object-c和swift，android為Java。

APP端的迭代過(guò)程中的最后一步，需要提交版本到應(yīng)用市場(chǎng)（AppStore或安卓各市場(chǎng)）。APP端的需求中有一部分會(huì)有更新頻繁、業(yè)務(wù)需求動(dòng)態(tài)等特點(diǎn)，需要用戶能夠及時(shí)更新。該場(chǎng)景下，H5能夠滿足此類特性的需求（更快、更簡(jiǎn)便的服務(wù)，代碼可高度重用，服務(wù)發(fā)布方便等優(yōu)點(diǎn)），能夠做到快速承載業(yè)務(wù)的更新，多端開(kāi)發(fā)統(tǒng)一。因此現(xiàn)在越來(lái)越多的公司使用H5+Native的Hybrid模式來(lái)開(kāi)發(fā)APP。

本文通過(guò)設(shè)計(jì)一種H5容器，在完成H5頁(yè)面的遠(yuǎn)端載入之外，提供對(duì)H5頁(yè)面訪問(wèn)加速、提高安全性的支持。同時(shí)設(shè)計(jì)H5的模版化，離線化完成H5頁(yè)面訪問(wèn)加速；還有Native與H5的請(qǐng)求委托，將鑒權(quán)信息等部分接口委托至APP端，增加安全性。

?

●●●

方案概述

1. H5頁(yè)面模版化、離線化

H5頁(yè)面分為靜態(tài)、動(dòng)態(tài)數(shù)據(jù)部分；目的是可以通過(guò)在APP端預(yù)先加載模版（靜態(tài)資源通過(guò)腳本自動(dòng)打包到應(yīng)用，首次安裝解壓處理），只請(qǐng)求動(dòng)態(tài)數(shù)據(jù)部分，減少并發(fā)的請(qǐng)求數(shù)量，提高速度。

2. 模版打包

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

3. 模版更新策略

更新時(shí)機(jī)：推送通知（客戶端靜默更新）、app啟動(dòng)、app回到? 前臺(tái)、定時(shí)周期性檢測(cè)更新、添加對(duì)象作為資源更新的監(jiān)聽(tīng)器更新模版，提供多維度的更新策略。（后期考慮基于長(zhǎng)連接的消息推送更新模版）

更新策略：遠(yuǎn)程模版配置和本地模版配置在模版版本和模版有效期上的比較。同時(shí)增加對(duì)模版的md5校驗(yàn)，防止資源的篡改。

4. 資源攔截

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

5. JsBridge通道

實(shí)現(xiàn)Native與H5頁(yè)面的交互：業(yè)務(wù)協(xié)議接口的定義，管理頁(yè)? ? ? 面切換，與服務(wù)器的數(shù)據(jù)交互，APP端通用功能等。Native與H5的請(qǐng)求委托，將鑒權(quán)信息等部分接口委托至APP端，增加安全性。

6. 日志統(tǒng)計(jì)

包括H5性能指標(biāo)，模版包的更新成功率，以及本地模版和遠(yuǎn)程頁(yè)面訪問(wèn)的占比，和一些異常日志的收集，然后統(tǒng)計(jì)上報(bào)，提供完善的日志統(tǒng)計(jì)。

?

?

●●●

詳細(xì)方案

1. 主流程

H5容器方案包括兩個(gè)主流程：

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

·???????模版訪問(wèn)流程：設(shè)計(jì)App識(shí)別并訪問(wèn)模版，H5與JS交互的流程

?

發(fā)布流程

模版發(fā)布流程如下圖所示：

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

·???????QA測(cè)試模版包，確認(rèn)無(wú)誤

·???????提交發(fā)布測(cè)試人，上傳CMS（上傳模版包至阿里云）

·???????CMS調(diào)用MobileServer接口，存入系統(tǒng)

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

模版加載時(shí)序圖：

2. 模版分類及識(shí)別

模版分類通過(guò)業(yè)務(wù)場(chǎng)景設(shè)定，并且可以通過(guò)wap url的特定字符串設(shè)別，例如:http://host/yougouPages/Cart?xxx=111

其中yougouPages/Cart即模版識(shí)別串（detectKey），容器加載到該url后，通過(guò)detectKey確定是否加載已經(jīng)存在的對(duì)應(yīng)的模版。

3. 配置信息管理

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

包括全量包和增量包下載地址，模版包的版本，識(shí)別字符串，模版id，模版更新時(shí)間戳，模版有效截止時(shí)間戳，模版狀態(tài)（用于下線模版識(shí)別，解決突發(fā)問(wèn)題）

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

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

后續(xù)考慮對(duì)資源映射進(jìn)行加密處理，防止被篡改。

5. H5與APP交互

考慮到H5對(duì)APP端的硬件信息、鑒權(quán)信息，請(qǐng)求信息等的依賴，H5Container需要為H5提供接口，提供對(duì)應(yīng)的信息。所有通過(guò)模版加載的url，帶上額外參數(shù)http://host/subpath?&ish5container=1,H5頁(yè)面可根據(jù)該參數(shù)確定相應(yīng)的初始化工作。

時(shí)序圖：

?

6. JsBridge接口描述

JsBridge作為native與js的信息交互的通道。提供最基本的方法調(diào)用的接口。APP需要進(jìn)行業(yè)務(wù)維度的封裝，暴露出接口。

7. 模版使用策略

模版的使用過(guò)程，在某些情況下不適合使用模版，或?yàn)榱私鉀Q模版在特定場(chǎng)景有問(wèn)題，決定停止使用。因此需要定義模版的使用條件。模版配置信息增加：vaildTs，offine，exception

8. 容器性能指標(biāo)

9. 容器增量包方案

?

10. 框架結(jié)構(gòu)

11.H5容器構(gòu)成

?

?

——【特別推薦】——

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

總結(jié)

以上是生活随笔為你收集整理的H5容器技术方案的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。