HTML 5 應用程序緩存

使用 HTML5，經過建立 cache manifest 文件，能夠輕鬆地建立 web 應用的離線版本。

什麼是應用程序緩存（Application Cache）？

HTML5 引入了應用程序緩存，這意味着 web 應用可進行緩存，並可在沒有因特網鏈接時進行訪問。

應用程序緩存爲應用帶來三個優點：

• 離線瀏覽 - 用戶可在應用離線時使用它們
• 速度 - 已緩存資源加載得更快
• 減小服務器負載 - 瀏覽器將只從服務器下載更新過或更改過的資源。

瀏覽器支持

全部主流瀏覽器均支持應用程序緩存，除了 Internet Explorer。

Manifest 文件

manifest 文件是簡單的文本文件，它告知瀏覽器被緩存的內容（以及不緩存的內容）。

manifest 文件可分爲三個部分：

• CACHE MANIFEST - 在此標題下列出的文件將在首次下載後進行緩存
• NETWORK - 在此標題下列出的文件須要與服務器的鏈接，且不會被緩存
• FALLBACK - 在此標題下列出的文件規定當頁面沒法訪問時的回退頁面（好比 404 頁面）

CACHE MANIFEST

第一行，CACHE MANIFEST，是必需的：

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

上面的 manifest 文件列出了三個資源：一個 CSS 文件，一個 GIF 圖像，以及一個 JavaScript 文件。當 manifest 文件加載後，瀏覽器會從網站的根目錄下載這三個文件。而後，不管用戶什麼時候與因特網斷開鏈接，這些資源依然是可用的。

# NETWORK 小節規定文件 "login.asp" 永遠不會被緩存，且離線時是不可用的

NETWORK:
login.asp

#可使用星號來指示全部其餘資源/文件都須要因特網鏈接：

NETWORK:
*

# FALLBACK 小節規定若是沒法創建因特網鏈接，則用 "offline.html" 替代 /html5/ 目錄中的全部文件：

FALLBACK:
/html5/ /404.html

更新緩存

一旦應用被緩存，它就會保持緩存直到發生下列狀況：

• 用戶清空瀏覽器緩存
• manifest 文件被修改（參閱下面的提示）
• 由程序來更新應用緩存

# 實例 - 完整的 Manifest 文件

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

FALLBACK:
/html5/ /404.html

重要的提示：以 "#" 開頭的是註釋行，但也可知足其餘用途。應用的緩存會在其 manifest 文件更改時被更新。若是您編輯了一幅圖片，或者修改了一個 JavaScript 函數，這些改變都不會被從新緩存。更新註釋行中的日期和版本號是一種使瀏覽器從新緩存文件的辦法。