淺談HTML5中的 Application Cache

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

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

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

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

假設有一個這樣的 html 檔案(sample.html):





測試




這個網頁(或者說是 web application)需要 sample.htmlsample.csssample.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 送出,而為了讓瀏覽器知道有這個檔案,則加在 標籤中:



...

如此一來(支援此規格的)瀏覽器便知道要去下載 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

  • hi! 這裡有個實例網站 (http://zipcode.ho600.com/) ,它是要作到離線查詢 5 碼郵遞區號的。

  • Hello Eric

    在朋友的介紹下知道了你的Blog,知道你對GAE及Big Table相關應用的分享,ˋ還有HTML5的分享,看了很興奮,在台灣很少能看到這麼了解GAE的人, 不好意思先自我介紹一下,我叫 Tony 我們總公司在美國台灣有分公司,最近我們公司大力推展公司的自有產品, 雲端電視的應用,想直接用目前最熱門的GAE,Html5來做開發,我們正在找詢對於這樣新工具有一定了解的人,能一起加入,不知你是否有認識這樣對這方面熟悉的朋友可以推薦的呢?

    也許可以聊一聊分享一下我們對GAE的一些想法, 希望能找到一群有創意及熱情的人一起共襄盛舉,我們預計參加明天的Google I/O 2011 展示我們的產品,如果有人選推薦的話,請Email連絡我,也可以約出來見面,或請你到我們公司當一下講師,我們目前有一群小朋友正自己努力的查著有限的資料,自行在摸索著GAE,希望能
    邀請你到我們公司為我們上一下課:P 大家交流交流… 謝謝!

    期待等你的回覆

  • Hi,我有時候在Server端更新了Html文件,同時也通過注釋#ver 2012-0721-1450等注釋方法更新了.appcache(該文章中的.manifest,現在好像更名了)。瀏覽器的console提示applicationCache更新成功,但是Html頁面卻依然還是舊版本。通過Chrome的網絡查看到html文件依舊是From Cache。Ctrl+F5依然無效,這種情況該怎麼處理?

  • Pingback: 以 HTML5 開發 Mobile Web App | Pearltrees()