摘要：接口管理獨(dú)立于的版本號(hào)，使用特性嗅探實(shí)現(xiàn)新舊的兼容，簡(jiǎn)單直觀。其中在網(wǎng)易有錢上使用了年多，支持了網(wǎng)易有錢的不斷增長(zhǎng)的業(yè)務(wù)需求，期間解決了很多遇到的通有的問(wèn)題。目前還沒(méi)有在線上系統(tǒng)中使用，目前正逐步將整體接入網(wǎng)易嚴(yán)選和網(wǎng)易推手。

目前移動(dòng)端開(kāi)發(fā)還處于一個(gè)高速發(fā)展的階段，為了應(yīng)對(duì)快速增長(zhǎng)業(yè)務(wù)需求，移動(dòng)開(kāi)發(fā)需要更高迭代響應(yīng)速度，從前期涌現(xiàn)出了以 React Native、Weex 為代表的 web 技術(shù)棧，到現(xiàn)在的 flutter 為代表的容器棧，這些跨度開(kāi)發(fā)框架試圖提高開(kāi)發(fā)效率的同時(shí)，也擁有優(yōu)秀的運(yùn)行效率，目前看起來(lái)正在接近這個(gè)目標(biāo)。
這些技術(shù)，加上 native 開(kāi)發(fā)技術(shù)，在不同應(yīng)用場(chǎng)景下，我們可以選擇最合適的技術(shù)棧，而最古老的跨端技術(shù)方案 - Hybrid， 在中小型項(xiàng)目和不復(fù)雜的需求中，依然是最合適的選擇，目前在網(wǎng)易嚴(yán)選主站，商品詳情、促銷活動(dòng)、第三方頁(yè)面展示還是用 Hybrid 實(shí)現(xiàn)的。 AppHost 提供的就是傳統(tǒng)意義上用 web 技術(shù)為 native 開(kāi)發(fā)業(yè)務(wù)功能的能力。

AppHost 是一套解決 H5 和 native 協(xié)作開(kāi)發(fā)的整體框架和服務(wù)。試圖解決 native 和 H5 目前迭代頻繁、時(shí)間倉(cāng)促造成質(zhì)量不高，業(yè)務(wù)膨脹后代碼混亂，兩端聯(lián)調(diào)困難，多端協(xié)作彼此割裂等痛點(diǎn)。
作為一種 JSBridge 的實(shí)現(xiàn)方法，AppHost 像一座橋，將 native 和 H5 開(kāi)發(fā)打通；
一邊是提供設(shè)計(jì)良好的 native framework 和相關(guān) protocol ，提高 native 接口的交付能力和開(kāi)發(fā)質(zhì)量；
一邊是為 H5 開(kāi)發(fā)的頁(yè)面和 native 聯(lián)調(diào)，提供輔助調(diào)試工具和性能調(diào)優(yōu)工具，讓前端開(kāi)發(fā)者對(duì) H5 in App 的調(diào)試體驗(yàn)像調(diào)試原生瀏覽器一樣，從而提高質(zhì)量和提升開(kāi)發(fā)效率。

這是實(shí)際工作中 JSBridge 面對(duì)的工作，很多是重復(fù)、乏味，又容易出錯(cuò)的。常見(jiàn)場(chǎng)景——“新需求里需要增加新的接口”的流程是這樣的：

新增一個(gè)文件或者在舊文件上編寫(xiě)代碼，新開(kāi)接口和屬性

在 Android、native 和 H5 共有的接口文檔上補(bǔ)充 API 接口。如果有需要，需要升級(jí) JSBridge 接口的版本號(hào)

將改動(dòng)通知 Android、H5 等相關(guān)方

增加測(cè)試用例（testcase 應(yīng)該 iOS 、Android、 QA、前端，共建測(cè)試用例）

如果有必要需要告知，QA 增加自動(dòng)化測(cè)試用例

前端需要考慮版本號(hào)升級(jí)之后，需不需要對(duì)新舊 native App 做兼容實(shí)現(xiàn)

AppHost 處理負(fù)責(zé) JSBridge 接口從 0 到 N 個(gè)、1歲到 5歲、出生到死亡周期，以及 JSBridge 之間的關(guān)系管理、對(duì)外提供數(shù)據(jù)支持等工作，所以它是解決方案，而不是個(gè)技術(shù)方案（如WebViewJavascriptBridge只是技術(shù)方案）。

分兩部分，AppHost Core 為 native 開(kāi)發(fā)提供基礎(chǔ)模塊和基本功能封裝；AppHost Debug Service 為 native、H5 前端、QA 等人員提供調(diào)試服務(wù)。下面詳細(xì)介紹功能。

webview 核心，包含常見(jiàn)需求的實(shí)現(xiàn)邏輯，包括

native 和 H5 的通訊協(xié)議，封裝了 native 端解析、H5 端發(fā)送邏輯。native 開(kāi)發(fā)人員只需要面向業(yè)務(wù)編碼，然后通知 H5； H5 開(kāi)發(fā)面向業(yè)務(wù)開(kāi)發(fā)，只需關(guān)心兩個(gè)接口。

新增接口用繼承 AppHostResponse 的方式實(shí)現(xiàn)，解決業(yè)務(wù)需求增長(zhǎng)、代碼無(wú)序膨脹的問(wèn)題。特別的，支持業(yè)務(wù)接口的延遲加載，不使用的接口，不會(huì)初始化。

Cookie管理，最煩人的 Cookie 丟失和 Cookie 同步問(wèn)題，已經(jīng)內(nèi)部妥善處理

一些人性化的小優(yōu)化。更合理的進(jìn)度條、瀏覽歷史滾動(dòng)記憶、增強(qiáng)的 native 執(zhí)行 js 代碼能力、基本的 API 接口調(diào)用鑒權(quán)等等。

JSBridge 接口管理

獨(dú)立于 App 的版本號(hào)，H5 使用特性嗅探實(shí)現(xiàn)新舊 App 的兼容，簡(jiǎn)單直觀。

API 接口簽名，可實(shí)現(xiàn) API 參數(shù)粒度的接口升級(jí)和開(kāi)關(guān)管理。

資源加載

加載遠(yuǎn)程 URL，單向同步 Cookie 到 WKWebView。

本地文件夾資源，可實(shí)現(xiàn)用離線包渲染動(dòng)態(tài)頁(yè)面。

某些業(yè)務(wù)場(chǎng)景下，可實(shí)現(xiàn) HTML 里的 xhr、js、css 資源請(qǐng)求攔截，不需要?jiǎng)佑盟接?webkit API。

API 接口文檔一體化和 testcase 自動(dòng)化

對(duì)于“native 為 H5 提供接口” 這件事情，如前述，需要多方的協(xié)調(diào)同步，很容易出現(xiàn)：接口文檔過(guò)時(shí)、文檔缺失、接口查找麻煩、接入新 API 不直觀、測(cè)試不方便，QA 回歸不充分，或者是多個(gè)環(huán)節(jié)重復(fù)寫(xiě)測(cè)試用例等壞情況。
AppHost 的 API 文檔模塊，將這些環(huán)節(jié)需要的文檔和測(cè)試用例，全部集中到開(kāi)發(fā)階段完成，后續(xù) H5 查詢的 API 文檔、QA 走查用例、自動(dòng)化測(cè)試，全部自動(dòng)生成。保證接口文檔的最新，省去多個(gè)環(huán)節(jié)的重復(fù)建設(shè)，內(nèi)置的自動(dòng)化測(cè)試支持，方便 QA 使用腳本回歸測(cè)試。

Remote Debugger 通過(guò)電腦瀏覽器提供 Debug Service

電腦瀏覽器具有訪問(wèn)方便、可展示區(qū)域大、輸入快捷方便、易于集成第三方調(diào)試工具的特點(diǎn)。相同的調(diào)試功能，理論上也可以集成在手機(jī) App端，但是體驗(yàn)會(huì)大打折扣，是個(gè)低效的調(diào)試方案。

幫助系統(tǒng)和文檔。

在瀏覽器端 Console ，實(shí)現(xiàn)了一個(gè)小型命令行程序，指導(dǎo)用戶如何使用本 Remote Debugger；同時(shí)還提供 即時(shí)查詢 API 接口 名稱、參數(shù)解釋、示例代碼等功能，讓你的工作流不需要切換到打開(kāi)的API 文檔文件或者瀏覽器，保持操作上下文。

REPL（Read-Eval-Print Loop）環(huán)境

Console 里實(shí)現(xiàn)了完整 webview 執(zhí)行環(huán)境，將傳統(tǒng)語(yǔ)言的探索、調(diào)試新特性的體驗(yàn)帶到 Remote Debugger，如同 Bash 的 shell prompt和 ruby 的irb 那樣。在這里輸入的所有命令如同在遠(yuǎn)端 webview 的 console 里執(zhí)行一樣。當(dāng)然還有Off mobile 和On mobile 來(lái)切換當(dāng)前命令是本地執(zhí)行還是遠(yuǎn)端 webview 執(zhí)行。

輔助功能

Console 提供了左側(cè)快捷命令；內(nèi)置了命令的歷史記憶，實(shí)現(xiàn)上下箭頭遍歷；支持 :clear ，清除當(dāng)前界面等功能

擴(kuò)展性

和 Safari 的 Develop 工具配合

我們知道 Safari Develop 工具是在頁(yè)面打開(kāi)后才會(huì)出現(xiàn)。如果我們有個(gè)頁(yè)面由 302 跳轉(zhuǎn)，我們想抓到想要的請(qǐng)求是做不到的。接入 AppHost 之后，我們保持Safari Develop 工具打開(kāi)的狀態(tài)，在 Remote Debugger 輸入命令 ，讓當(dāng)前 webview 加載初始 URL，這樣我們就可以抓到從 302 跳轉(zhuǎn)開(kāi)始后的網(wǎng)絡(luò)請(qǐng)求了。

集成 weinre。

通過(guò):weinre -- 命令，不需要改動(dòng)被調(diào)試頁(yè)面的源碼，即可提供 weinre 調(diào)試服務(wù)，而且一次注入當(dāng)前 App 啟動(dòng)后全程有效，后續(xù)頁(yè)面無(wú)需再注入。用這個(gè)特性，甚至可以調(diào)試第三方頁(yè)面。

支持 console.log。這個(gè)無(wú)需贅言，曾經(jīng)的` https://jsconsole.com/ 是首選的遠(yuǎn)程調(diào)試服務(wù)。AppHost 內(nèi)置此功能。

演示
6.1 基本操作演示

6.2 **查看嚴(yán)選首頁(yè)的 onload 事件時(shí)間**

6.3 **使用 weinre 調(diào)試嚴(yán)選頁(yè)面**

AppHost 來(lái)自作者近年 webview 開(kāi)發(fā)實(shí)踐總結(jié)，真切的感受到這套設(shè)計(jì)在面對(duì)業(yè)務(wù)快速發(fā)展、技術(shù)重構(gòu)需求、多端協(xié)作等方面的優(yōu)越性，特整理分享出來(lái)，不僅面向我們以后的業(yè)務(wù)開(kāi)發(fā)，也希望拋磚引玉，和各位同行共享知識(shí)，以

指導(dǎo) native 端業(yè)務(wù)成長(zhǎng)、保持 App 可擴(kuò)展、可維護(hù)

輔助 H5 快速開(kāi)發(fā)、性能調(diào)優(yōu)，提高產(chǎn)品體驗(yàn)

在此，希望 AppHost 能幫你解決在 webview 相關(guān)開(kāi)發(fā)過(guò)程中遇到的常見(jiàn)問(wèn)題，讓你更多的時(shí)間花在如何完善業(yè)務(wù)邏輯，加快 App 成長(zhǎng)上面，為你的開(kāi)發(fā)工作帶來(lái)切實(shí)的幫助，避免 996，享受工作和生活樂(lè)趣。

目前 AppHost 只有 iOS 端。其中 AppHost Core 在網(wǎng)易有錢上使用了 3 年多，支持了網(wǎng)易有錢的不斷增長(zhǎng)的業(yè)務(wù)需求，期間解決了很多 WKWebView 遇到的通有的問(wèn)題。 AppHost Debug Service 目前還沒(méi)有在線上系統(tǒng)中使用，目前正逐步將 AppHost 整體接入網(wǎng)易嚴(yán)選和網(wǎng)易推手。

詳細(xì)的技術(shù)方案和接入方式見(jiàn)以下鏈接

AppHostExample 項(xiàng)目，https://github.com/hite/AppHo...

AppHost 項(xiàng)目，https://github.com/hite/AppHost

希望各位同行也能分享各自解決方案，共同提高行業(yè) Hybrid 開(kāi)發(fā)體驗(yàn)。