H5靜態資源本地化實踐

　　如今不少app都是經過webview內嵌H5的頁面，這種方式的好處就是無需發版就能更新線上的內容，並且能夠作到多平臺的統一開發，節約開發成本。可是這種模式也帶來了必定的問題，web開發很大程度依賴於網絡，而移動端的網絡千差萬別，H5頁面對於網絡屬於強依賴，由於各類請求都須要走網絡，因此在弱網的狀況下，資源文件遲遲加載不到，影響整個頁面的解析，致使頁面白屏。

　　對於這個問題，根源在於資源文件對於網絡的依賴，爲了解決這個問題不少hybrid應用將靜態資源文件都打包進了應用裏面，對文件的訪問直接指定爲本地文件，這雖然能夠解決弱網狀況下白屏問題，可是也致使了其餘問題，一個是更新須要跟隨app的發版，二是若是頁面在web和app平臺共用的話，須要打包兩個版本，比較麻煩。

針對上面問題，資源本地化是必須作的，只有資源文件請求不依賴於網絡纔是解決問題的根本。同時，咱們須要提供一套在線更新本地資源文件的機制，才能充分利用H5頁面可以及時升級更新的靈活性。

資源本地化

　　爲了讓一套 web 頁面同時兼容瀏覽器和 Hybrid 容器等多種環境，咱們但願不改變前端代碼就能夠作到「資源請求發到本地」。這裏採用的解決方案是監控整個webview容器的網絡請求。

採用配置映射表的形式，映射表指明瞭網絡請求文件對應的本地文件的路徑，當webview的網絡請求發出的時候，webview的攔截全部的網絡請求，檢測請求文件資源是否在配置表中，若是有，直接拿本地文件，若是沒有直接走網絡請求。

 

資源配置表：

 

　　這樣作的好處是資源本地化對於整個web容器是一個黑盒子，我按照正常的方式發送和接收請求，只不過是中途的方式變了，無需改變咱們web的任何文件來作兼容。這裏只要提供給客戶端一份資源映射表便可。而映射表的生成能夠直接作在持續集成的流程裏，構建工具在 build 時會幫你生成出來。

至於客戶端的修改，須要對webview的網絡訪問進行攔截匹配，具體可參考：

Android：http://droidyue.com/blog/2014/11/23/block-web-resource-in-webview/index.hml

Ios: http://www.zhimengzhe.com/IOSkaifa/257201.html

至此，咱們經過上面的方式能夠作到讀取本地資源，那接下來須要解決另一個問題，本地資源如何獲取和更新。

離線資源獲取和更新

　　對於離線資源的獲取和更新，採用比較暴力的手段。將整個離線包zip打包壓縮，每次H5應用啓動後，會去請求一個配置文件，配置文件包含當前離線資源包的版本號字段，將請求到的版本號跟上次保存（第一次不存在）在本地的版本號比較，若是發生了改變，說明離線資源文件包更新，下載解壓而且替換掉舊的離線包。

　　到這裏就完成了靜態資源本地化的過程。在弱網或者無網絡的狀況下咱們的應用也能快速打開頁面。在測試的過程當中，又出現了一些問題，因爲靜態頁面能夠打開，可是咱們接口獲取一些列表數據走的是異步請求的接口，沒法離線到本地，致使沒有數據的展現。這裏咱們須要作一些本地化存儲。

本地化存儲

　　對於一些基本的數據展現接口，咱們能夠藉助HTML5的localstorage，當在有網絡請求的狀況下，將數據打上時間戳，存儲localstorage。數據請求超時的時候，把對應存儲在localstorage的數據暫時展現給用戶，這樣能夠解決長時間沒有數據的問題。localstorage 的方案要解決跨域訪問的問題，而且在每一個子域存儲空間上存在上限，是5M，因此對於這個數據的存儲要控制好。