愛奇藝APP webview快取和管理
在架構一個大型app的時候，混合應用（hybridAPP）是一個十分成熟並且流行的技術方案。Webview容器具有絕大多數系統瀏覽器具有的標準，並且可以通過jsBridge和Native互動，在功能和效能方面也有很大的提升空間。
在這樣的前提下，業務方可以開發一套H5程式碼，同時展現在瀏覽器、APP、微信中，可以跨APP分享、互動，十分方便快捷。在功能方面，愛奇藝視訊提供了JSSDK供第三方使用，那麼在H5效能方面如何提升，就是我們現在正在談論的問題。
本文將深入研討如何通過離線化技術加快H5頁面初始載入速度、在弱網環境下提升使用者體驗、極大地降低資源請求數量，減小伺服器壓力的方法。
離線快取
愛奇藝離線快取系統最初的設計包含了如下幾個主要特性：
-
可控的資源更新（對每個被快取的頁面和資原始檔可追蹤、可操控）；
-
選擇性的資源快取（可選擇希望快取的資源型別，可以精確到每個檔案）；
-
內容壓縮（可選擇性對html、css、js等檔案做程式碼壓縮，最終再對整個資源包進行zip壓縮）；
-
合併重複資源（同資源不同url會去重）
以上也是離線快取系統對比瀏覽器快取的優勢所在。瀏覽器快取依賴HTTP請求的響應頭，一旦有檔案需要更新，必須在客戶端清除快取，或者用版本號來免快取，這樣一來，增加了業務方對檔案快取管理的難度，而且無法清除指定某個資源的快取。
同時，我們提供了一套基於配置的CLI的方式以及GUI的方式方便業務方管理他們得快取。對此我們設計了一套離線化管理後臺。
架構+實現原理
下圖簡單描繪了整個系統的設計，而實際的專案開發過程中，涉及到很多複雜的細節內容，這裡不一一描述：
整個離線快取由環環相扣的3部分組成，我們將在下文中對每個部分進行詳細的解釋：
打包系統
打包是整個流程的第一步。業務方只有一個可訪問的H5連結。在這個前提下，怎樣可以事先獲取到希望快取的資源？讓業務方自行整理一個資料夾或者列表？在這個問題中，我們需要考慮以下幾點：
是否高效?
考慮到業務隔離性，和整個離線快取機制的複雜性，難道業務方需要對每個頁面整理一個資源列表嗎？當然他們可以把本地開發環境的資原始檔夾上傳，但是有些情況顯然並不適用：
-
頁面引用了外部資源
-
頁面是自動生成的（沒有本地開發環境）
是否容易出錯？
如果讓業務方整理一個資源清單，實際操作中很容易出錯，並且歌是很難處理。
是否容易管理？
如果頁面或自願發生更改，如何快速更新快取？如何方便檢視被快取的資源？
因此，帶著這些問題，我們需要一個自動化的打包程式、一個一鍵式的工具、一個友好的視覺化平臺來解決。
之後，從配置檔案中獲取資源的filter配置，包含規則、排除規則、最大壓縮後體積、最小檔案體積，等等，最終獲取一份業務方想要的離線zip包。離線zip包會帶上本次打包的版本資訊，同步到CDN上，提供給使用者客戶端下載使用。
視覺化
我們提供了圖形介面給業務方進行方便快捷的打包和管理，流程化的打包操作，模組化的配置管理和歷史記錄，一目瞭然。
視覺化的管理後臺具有清晰的步驟、友好的介面、醒目的說明。使用者可以在基本模式和專業模式之間輕鬆選擇，快速打包。
在基本模式中，我們提供了一套預設的打包配置，業務方只需提供極少的資訊，就可以實現快速打包；
而專業模式則包括完整的配置選項，可以充分自定義自己想要快取的檔案和規則。
為了方便使用者檢視和管理以前的打包操作，我們提供了一個打包歷史的模組，記錄了每一次的操作和結果：
從中可以看到在不同的環境、平臺，每次的操作分別新增、更新、刪除了哪些資源。
對於管理員來說，不光可以檢視每次的操作記錄，還可以對離線包內的每個資源進行刪除等操作，可以下載對應平臺和環境的離線包進行檢視，也可以手動上傳離線包，簡單易用。
系統更新
資源一旦成功打包，並且釋出到CDN，使用者就可以用了。這個過程，是由愛奇藝APP來完成。對離線資源的更新和下載，都在app啟動時完成。APP會比對離線包的版本，自動在後臺下載更新的離線包，並解壓到本地。如果後面出現網路狀況不佳的情況，也不用擔心載入離線資源的時候會卡住。
攔截系統
這才是使用者能感知到的部分。使用者在APP內開啟一個內嵌的H5時，Webview容器會對容器內的請求進行攔截，並在解壓後的離線包內搜尋匹配。一旦找到匹配項，就直接載入本地的資原始檔，而不會發起網路請求。這樣以來就真正實現了資源的離線化：
寫在最後
離線快取系統給愛奇藝APP內嵌H5提供了一個性能大規模提升的方式，也為業務方控制自己頁面的快取提供了很大的便利。尤其是在3G、4G，以及訊號較差的網路情況，甚至無網的情況下，使用者體驗能得到很大的提升，再也不會出現進度條一直緩衝載入，白屏時間很久的情況（針對大部分活動類頁面）。
當然，目前該系統對不同業務的優化程度不同。對於服務端渲染的動態頁面，還無法進行全部的離線化快取。針對這類同構渲染的業務場景，後續我們將推出離線快取的動態化升級，在必要的服務端請求的前提下儘可能多的進行本地化快取，自動載入離線化模板，來同樣達到弱網、無網環境秒開的效果。
此外，我們也將優化快取的更新機制，讓業務方有更多更靈活的快取選擇。同時我們正在研究一套更智慧的離線資源版本管理系統，以期降低離線包更新所帶來的使用者下載流量。
我們的工作旨在提升愛奇藝APP內H5的使用者體驗，用方便易用的技術來最大化地幫助業務方提升開發效率和業務轉化率。