目前移動端開發還處於一個高速發展的階段，為了應對快速增長業務需求，移動開發需要更高迭代響應速度，從前期湧現出了以 React Native、Weex 為代表的 web 技術棧，到現在的 flutter 為代表的容器棧，這些跨度開發框架試圖提高開發效率的同時，也擁有優秀的執行效率，目前看起來正在接近這個目標。 這些技術，加上 native 開發技術，在不同應用場景下，我們可以選擇最合適的技術棧，而最古老的跨端技術方案 - Hybrid， 在中小型專案和不復雜的需求中，依然是最合適的選擇，目前在網易嚴選主站，商品詳情、促銷活動、第三方頁面展示還是用 Hybrid 實現的。 AppHost 提供的就是傳統意義上用 web 技術為 native 開發業務功能的能力。
AppHost 是一套解決 H5 和 native 協作開發的整體框架和服務。試圖解決 native 和 H5 目前迭代頻繁、時間倉促造成質量不高，業務膨脹後程式碼混亂，兩端聯調困難，多端協作彼此割裂等痛點。 作為一種 JSBridge 的實現方法，AppHost 像一座橋，將 native 和 H5 開發打通； 一邊是提供設計良好的 native framework 和相關 protocol ，提高 native 介面的交付能力和開發質量； 一邊是為 H5 開發的頁面和 native 聯調，提供輔助除錯工具和效能調優工具，讓前端開發者對 H5 in App 的除錯體驗像除錯原生瀏覽器一樣，從而提高質量和提升開發效率。
Hybrid 的介面開發生命週期
- 新增一個檔案或者在舊檔案上編寫程式碼，新開介面和屬性
- 在 Android、native 和 H5 共有的介面文件上補充 API 介面。如果有需要，需要升級 JSBridge 介面的版本號
- 將改動通知 Android、H5 等相關方
- 增加測試用例（testcase 應該 iOS 、Android、 QA、前端，共建測試用例）
- 如果有必要需要告知，QA 增加自動化測試用例
- 前端需要考慮版本號升級之後，需不需要對新舊 native App 做相容實現
AppHost 處理負責 JSBridge 介面從 0 到 N 個、1歲到 5歲、出生到死亡週期，以及 JSBridge 之間的關係管理、對外提供資料支援等工作，所以它是解決方案，而不是個技術方案（如WebViewJavascriptBridge只是技術方案）。
AppHost 的功能總覽
分兩部分，AppHost Core 為 native 開發提供基礎模組和基本功能封裝；AppHost Debug Service 為 native、H5 前端、QA 等人員提供除錯服務。下面詳細介紹功能。
AppHostCore
- webview 核心，包含常見需求的實現邏輯，包括
- native 和 H5 的通訊協議，封裝了 native 端解析、H5 端傳送邏輯。native 開發人員只需要面向業務編碼，然後通知 H5； H5 開發面向業務開發，只需關心兩個介面。
- 新增介面用繼承 AppHostResponse 的方式實現，解決業務需求增長、程式碼無序膨脹的問題。特別的，支援業務介面的延遲載入，不使用的介面，不會初始化。
- Cookie管理，最煩人的 Cookie 丟失和 Cookie 同步問題，已經內部妥善處理
- 一些人性化的小優化。更合理的進度條、瀏覽歷史滾動記憶、增強的 native 執行 js 程式碼能力、基本的 API 介面呼叫鑑權等等。
- JSBridge 介面管理
- 獨立於 App 的版本號，H5 使用特性嗅探實現新舊 App 的相容，簡單直觀。
- API 介面簽名，可實現 API 引數粒度的介面升級和開關管理。
- 資源載入
- 載入遠端 URL，單向同步 Cookie 到 WKWebView。
- 本地資料夾資源，可實現用離線包渲染動態頁面。
- 某些業務場景下，可實現 HTML 裡的 xhr、js、css 資源請求攔截，不需要動用私有 webkit API。
- API 介面文件一體化和 testcase 自動化 對於“native 為 H5 提供介面” 這件事情，如前述，需要多方的協調同步，很容易出現：介面文件過時、文件缺失、介面查詢麻煩、接入新 API 不直觀、測試不方便，QA 迴歸不充分，或者是多個環節重複寫測試用例等壞情況。 AppHost 的 API 文件模組，將這些環節需要的文件和測試用例，全部集中到開發階段完成，後續 H5 查詢的 API 文件、QA 走查用例、自動化測試，全部自動生成。保證介面文件的最新，省去多個環節的重複建設，內建的自動化測試支援，方便 QA 使用指令碼回歸測試。
AppHost Debug Service
- Remote Debugger 通過電腦瀏覽器提供 Debug Service 電腦瀏覽器具有訪問方便、可展示區域大、輸入快捷方便、易於整合第三方除錯工具的特點。相同的除錯功能，理論上也可以整合在手機 App端，但是體驗會大打折扣，是個低效的除錯方案。
- 幫助系統和文件。 在瀏覽器端 Console ，實現了一個小型命令列程式，指導使用者如何使用本 Remote Debugger；同時還提供 即時查詢 API 介面 名稱、引數解釋、示例程式碼等功能，讓你的工作流不需要切換到開啟的API 文件檔案或者瀏覽器，保持操作上下文。
- REPL（Read-Eval-Print Loop）環境
Console 裡實現了完整 webview 執行環境，將傳統語言的探索、除錯新特性的體驗帶到 Remote Debugger，如同 Bash 的
shell prompt和 ruby 的irb那樣。在這裡輸入的所有命令如同在遠端 webview 的 console 裡執行一樣。當然還有Off mobile和On mobile來切換當前命令是本地執行還是遠端 webview 執行。 - 輔助功能
Console 提供了左側快捷命令；內建了命令的歷史記憶，實現上下箭頭遍歷；支援
:clear，清除當前介面等功能 - 擴充套件性
- 和 Safari 的 Develop 工具配合 我們知道 Safari Develop 工具是在頁面開啟後才會出現。如果我們有個頁面由 302 跳轉，我們想抓到想要的請求是做不到的。接入 AppHost 之後，我們保持Safari Develop 工具開啟的狀態，在 Remote Debugger 輸入命令 ，讓當前 webview 載入初始 URL，這樣我們就可以抓到從 302 跳轉開始後的網路請求了。
- 整合 weinre。
通過
:weinre --命令，不需要改動被除錯頁面的原始碼，即可提供 weinre 除錯服務，而且一次注入當前 App 啟動後全程有效，後續頁面無需再注入。用這個特性，甚至可以除錯第三方頁面。 - 支援 console.log。這個無需贅言，曾經的` jsconsole.com/ 是首選的遠端除錯服務。AppHost 內建此功能。
- 演示
6.1 基本操作演示
AppHost 願景目標
AppHost 來自作者近年 webview 開發實踐總結，真切的感受到這套設計在面對業務快速發展、技術重構需求、多端協作等方面的優越性，特整理分享出來，不僅面向我們以後的業務開發，也希望拋磚引玉，和各位同行共享知識，以
- 指導 native 端業務成長、保持 App 可擴充套件、可維護
- 輔助 H5 快速開發、效能調優，提高產品體驗
在此，希望 AppHost 能幫你解決在 webview 相關開發過程中遇到的常見問題，讓你更多的時間花在如何完善業務邏輯，加快 App 成長上面，為你的開發工作帶來切實的幫助，避免 996，享受工作和生活樂趣。
採用AppHost 的 App 有哪些？
目前 AppHost 只有 iOS 端。其中 AppHost Core 在網易有錢上使用了 3 年多，支援了網易有錢的不斷增長的業務需求，期間解決了很多 WKWebView 遇到的通有的問題。 AppHost Debug Service 目前還沒有線上上系統中使用，目前正逐步將 AppHost 整體接入網易嚴選和網易推手。
使用指南
詳細的技術方案和接入方式見以下連結
- AppHostExample 專案，github.com/hite/AppHos…
- AppHost 專案，github.com/hite/AppHos… 希望各位同行也能分享各自解決方案，共同提高行業 Hybrid 開發體驗。