現在很多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，所以對於這個數據的存儲要控制好。