HTML5移動應用開發第3章：移動Web離線應用

先決條件

在本文中，您將使用最新 Web 技術開發 Web 應用程序。這裡的大多數代碼只是 HTML、JavaScript 和 CSS — 任何 Web 開發人員的核心技術。需要的最重要的東西是用於測試代碼的浏覽器。本文中的大多數代碼將運行在最新的桌面浏覽器上，例外的情況會指出來。當然，還必須在移動浏覽器上進行測試，您肯定希望最新的 iPhone 和 Android SDK 支持這些代碼。本文中使用的是 iPhone SDK 3.1.3 和 Android SDK 2.1。

為何要支持您的應用程序離線工作？

由於幾個原因，離線 Web 應用程序對於用戶和開發人員都有吸引力。許多開發人員希望能夠編寫一個能夠在所有最流行的智能手機上運行的 Web 應用程序，而不是為每個平台編寫本機應用程序。這對開發人員很方便，但並不意味這這是用戶的願望。為實現上述目標，移動 Web 應用程序必須能夠提供本機移動應用程序能夠提供的許多（或絕大部分）相同的特性。離線工作肯定是其中一個特性。有些應用程序非常依賴來自 Internet 的數據和服務 — 不管它們是移動 Web 還是本機應用程序。但是，應用程序不能僅僅因為用戶的連接不好而完全失敗。但這正是傳統 Web 應用程序的症結所在。

離線功能使移動 Web 應用程序類似於本機應用程序。此外，離線功能還有其他好處。Web 浏覽器總是緩存靜態資源。它們依賴通過您的 Web 服務器發送的 HTTP 響應頭部中的元數據來檢索渲染頁面所需的 HTML、JavaScript、CSS 和圖像。如果渲染頁面所需的所有資源都已緩存，那麼頁面就可以非常迅速地加載。但是，如果某個資源沒有緩存，那麼它將極大地降低頁面載入速度。這種情況經常發生，實在是讓人無法忍受。也許一個 CSS 文件擁有一個與其他所有文件都不同的 Cache-Control 頭部，或者，也許是浏覽器因為耗盡了已分配空間而無法緩存。

使用離線應用程序，您可以確保所有資源都會被緩存。浏覽器將總是從緩存加載所有資源，盡管您也能夠控制哪些資源從緩存加載。一種常見的 Ajax 技巧是將一個額外的時間戳參數添加到 Ajax GET 請求（或者，更糟糕的是在應該使用 GET 時使用 POST）來避免浏覽器緩存一個響應。您無需使用這種技巧來支持離線 Web 應用程序。

離線應用程序聽起來挺棒，那麼創建一個離線應用程序一定很復雜，對吧？實際上，創建方法非常簡單，只需完成下面三個步驟：

1. 創建一個在線清單文件。
2. 告知浏覽器這個清單文件。
3. 設置服務器上的 MIME 類型。

離線清單

創建過程涉及一個關鍵文件：您的應用程序的緩存清單。這個文件告知浏覽器要緩存（或者，不緩存）的確切內容。這成為您的應用程序的事實來源。清單 1 展示了一個簡單緩存清單示例。

清單 1. 簡單緩存清單

1. CACHE MANIFEST  
2. # Version 0.1  
3. offline.html  
4. /iui/iui.js