傳統的 H5 技術容易受到網路環境影響，因而降低 H5 頁面的效能。通過使用離線包，可以解決該問題，同時保留 H5 的優點。
離線包 是將包括 HTML、JavaScript、CSS 等頁面內靜態資源打包到一個壓縮包內。預先下載該離線包到本地，然後通過用戶端開啟，直接從本地載入離線包，從而最大程度地擺離網絡環境對 H5 頁面的影響。
使用 H5 離線包可以給您帶來以下優勢：
提升使用者體驗：通過離線包的方式把頁面內靜態資源嵌入到應用中並發布，當使用者第一次開啟應用的時候，就無需依賴網路環境下載該資源，而是馬上開始使用該應用。
實現動態更新：在推出新版本或是緊急發布的時候，您可以把修改的資源放入離線包，通過更新配置讓應用自動下載更新。因此，您無需通過市集審核，就能讓使用者及早接收更新。
離線包原理
您將從以下方面瞭解離線包原理：
離線包結構
離線包是一個 .amr 格式的壓縮檔，將尾碼 amr 改成 zip 解壓縮後，可以看到其中包含了 HTML 資源和 JavaScript 代碼等。待 H5 容器載入後，這些資源和代碼能在 WebView 內渲染。
以 iOS 系統為例，下圖顯示了一般資源套件的目錄結構：
一級目錄：一般資源套件的 ID，如
20150901。二級目錄及子目錄即為業務自訂的資源檔。建議所有的前端檔案最好儲存在一個統一的目錄下，目錄名可自訂，如
/www，並設定當前離線包預設開啟的主入口檔案，如/www/index.html。
離線包類型
通常，在 H5 的開發過程中，會存在使用一些基礎通用庫的情況，比如 zepto，fastclick 等。在 App 中的 WebView，有時候緩衝不可靠，曾經發現有機型在退出後，緩衝自動失效。為了進一步提升 H5 頁面效能，使用全域離線包，將一系列的通用資源打成一個特殊的 App 包，下發到用戶端。
離線包可以分為以下類型：
全域離線包：包含公用的資源，可供多個應用共同使用。
私人離線包：只可以被某個應用單獨使用。
使用全域離線包後，在訪問 H5 的時候，都會嘗試在這個包嘗試讀取。如果該離線包裡有對應資源的時候，直接從該離線包裡取，而不通過網路。因此，全域離線包的機制主要是為瞭解決對於通用庫的使用。
由於要保證離線包的用戶端覆蓋率以及足夠的通用性，此包一般的更新周期至少為 1 個月，並且嚴格控制離線包的大小。
渲染過程
當 H5 容器發出資源請求時，其訪問本地資源或線上資源所使用的 URL 是一致的。
H5 容器會先截獲該請求，截獲請求後，發生如下情況：
如果本地有資源可以滿足該請求的話，H5 容器會使用本地資源。
如果沒有可以滿足請求的本地資源，H5 容器會使用線上資源。
因此，無論資源是在本地或者是線上，WebView 都是無感知的。
離線包的下載取決於建立離線包時的配置：
如果 下載時機 配置為 僅 WiFi，則只有在 WiFi 網路時會在後台自動下載離線包。
如果 下載時機 配置為 所有網路都下載，則在非 WiFi 網路時會消耗使用者流量自動下載，請謹慎使用。
如果目前使用者點擊 App 時，離線包尚未下載完畢，則會跳轉至 fallback 地址，顯示線上頁面。fallback 技術用於應對離線包未下載完畢的情境。每個離線包發布時，都會同步在 CDN 發布一個對應的線上版本，目錄結構和離線包結構一致。fallback 地址會隨離線包資訊下發到本地。在離線包未下載完畢的情境下，用戶端會攔截頁面請求，轉向對應的 CDN 地址，實現線上頁面和離線頁面隨時切換。
離線包運行模式
要開啟離線包，您需要完成以下步驟：
請求包資訊：從服務端請求離線包資訊儲存到本機資料庫的過程。離線包資訊包括離線包的下載地址、離線包版本號碼等。
下載離線包：把離線包從服務端下載到手機。
安裝離線包：下載目錄，拷貝到手機安裝目錄。
虛擬網域名稱
虛擬網域名稱是容器的獨特機制，僅對離線應用有效。當頁面儲存在用戶端之後，WebView 是通過 file Schema 從本地載入訪問的。然而，使用者就能在地址欄裡直接看到 file 的路徑，這就會導致以下問題：
使用者體驗問題：當使用者看到了 file 地址，會對暴露的地址產生不安全感和不自在。
安全性問題：由於 file 協議上直接帶上了本地路徑，任何使用者都可以看到這個檔案所在的檔案路徑，會存在一定的安全隱患。
基於如上問題的考慮，推薦採用虛擬網域名稱的機制而不直接使用 file 路徑來訪問。虛擬網域名稱是一個符合 URL Scheme 規範的 HTTPS 網域名稱地址，例如 https://xxxxxxx.h5app.example.com，虛擬網域名稱的 父網域名稱 example.com 一定得使用自己註冊的網域名稱。
現在標準的虛擬網域名稱的格式如下：
https://{appid}.h5app.example.com。