Mobile Web #4 利用 application caching 減少網路延遲

一直以來 Web 都有一個問題,就是網路連線的問題,連線的品質確實影響了 Web User Experience,以往在這情況下,我都會說”去怪你的網路公司吧”。但是到了 Mobile 裝置上,這個情況更顯得嚴重了,並不是罵一罵 3G 廠商就能解決的,就算稍微好心增加一點頻寬,也並不能消除連線問題。只能想辦法讓 User Experience 盡可能提升。

browser caching & application caching

既然如此要提升User Experience 的話當然就是在本機資源上作手腳,瀏覽器本身也就包含了 caching 的功能,不過以往的 browser caching 是不容易控制的,在 HTML5 之後把 cache 動作演變成可以從 application 去控制,也可以透過 javascript 去得知以及控制狀態。

manifest

manifest 是 HTML5 的新屬性,負責定義有關於整個網站 cache 的動作,利用 manifest 的設定相關網路 cache 還有連線離線的處理。目前五大瀏覽器除了 IE 之外,其他的最新版本都支援 manifest 。

CACHE MANIFEST
# VERSION 1.0

CACHE:
/favicon.ico
/Content/Images/desktop-icon.png
/Content/Images/startup-icon.png

在 CACHE 之後定義需要 CACHE 的檔案,在 manifest 中定義的 cache files 除非 manifest 檔案有更改,不然都會被視為是同樣的檔案,所以如果在這邊的資源有更改過,那你也必須修改 manifest 檔案(可以在#後面加上版本編號),不然瀏覽器還是會認為是同一份檔案。

NETWORK:  /Home/Member
/Report/

在 NETWORK 的區塊定義需要網路連線的部分,特定檔案或是包含子路徑,在這邊定義的部分不會被 cache 。

FALLBACK:
/Home/Offline

FALLBACK 這邊則是如果網頁在離線的狀態下被開啟(而且並沒有存在 cache 中),則會顯示這個頁面。


http://www.html5rocks.com/en/tutorials/appcache/beginner/

http://www.pluralsight-training.net/microsoft/

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *