用了 application cache 之後，平時可以加快網站載入的速度，離線時還可以繼續使用。

HTML5 中有一個「Offline Web Application」的規格，簡單來說，就是你可以告訴瀏覽器

「哪些東西請 cache 在你那裡，哪些東西一定得上網路抓，在沒有網路連線時應該使用哪一個 html 檔案來開啟」。

而你需要做的，只是準備一個檔案提供這些資料，當（支援這個規格的）瀏覽器讀取時便會自動 cache 住該 cache 的檔案。

假設有一個這樣的 html 檔案（sample.html）：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>測試</title>
    <link rel="stylesheet" type="text/css" href="sample.css">
  </head>
  <body>
    <img src="http://example.com/path/to/file.jpg" alt="">
    <script src="sample.js"></script>
  </body>
</html>

這個網頁（或者說是 web application）需要 sample.html、 sample.css、sample.js 檔案以及 http://example.com/path/to/file.jpg 這個圖檔才能運作，那麼可以利用 HTML5 application cache 的機制將前三個檔案 cache 在 local 端，只有圖檔是上網抓，這樣可以大大減少瀏覽器的 request 數目。

所以根據規格，你可以準備一個 sample.manifest 檔案，內容如下：

CACHE MANIFEST
sample.html
sample.css
sample.js
NETWORK:
*

這個檔案在 server 上必須要以 text/cache-manifest 的 MIME type 送出，而為了讓瀏覽器知道有這個檔案，則加在 <html> 標籤中：

<!DOCTYPE html>
<html manifest="sample.manifest">
...

如此一來（支援此規格的）瀏覽器便知道要去下載 sample.manifest 來看看要 cache 什麼檔案，所以之後瀏覽器就知道遇到這些檔案可以直接從 local 端拿，不必再到 server 端讀取，除了離線支援之外，就有是有連線的狀況也可以省下不少網路傳輸（讀取）的時間。

關於 manifest 檔案中的語法，建議參考規格書的內容（因為都還在 draft）。

當然，有 cache 就會有 cache invalidate 的問題，也就是當被 cache 住的檔案有更新的時候，要怎麼讓瀏覽器知道呢？你可以利用 JavaScript 操作 window.applicationCache 這個物件來瞭解 cache 的狀況，除了可以利用 applicationCache.status 取得 cache 的狀態之外，也可以手動透過 applicationCache.update() 來進行更新的動作。此外，在操作 cache 時可以檢查 navigator.onLine 的值來確定瀏覽器目前是否有網路連線。

實例參考

如果你有使用 iPhone/Android 手機連上 Google 的行動版網站，你可以發現只要你曾經連過那些網站，下一次在瀏覽器開啟時，畫面很快就出現了，其餘可能需要網路連線（檢查你的位置、讀取遠端資料庫等等）的部份是稍候才會開始動作。這就是利用 application cache 讓你的手機先將畫面的部份 cache 起來，所以不但開啟時很快就可以讀出畫面，就算手機在沒有網路連線的狀態下，還是可以看到畫面。試想一下，手機的連線、傳輸都較有線網路慢上許多，有這樣的 cache 機制可以讓你的 (mobile) web application 更加 responsive，而若是搭配 local storage 或是 local database 那就有更完整的離線支援（如：Gmail 行動版）了。

References

 

歷史上的今天