導讀：Malcolm Sherida是Microsoft在ASP.NET方面的awarded MVP，精通ASP和Telerik，經常在澳大利亞和新西蘭的會議以及用戶組中做報告。作為一個長期使用ASP.NET的人，他關注Web技術超過10年了。他喜歡使用ASP.NET MVC工作，并喜歡使用jQuery和Javascript。他也為SitePoint和其他一些網站寫一些關于ASP.NET的技術文章。

最近，我發布了一篇博文，內容是關于HTML5的一個新特性，博文名字是“通過應用程序緩存實現離線瀏覽”。這篇文章獲得了很好的反響，有人請我再多談一些內容，包括：

• 如何決定什么文章應該被緩存
• 緩存文件帶來的影響
• 調試應用程序緩存
• 所以這篇文章是接著上篇文章寫的。如果你還沒有看過上篇文章，也許你應該先去看看。

下面我們將來看看你應該或者不應該添加到應用程序緩存中的資源。

你應該緩存什么？

從技術上講，從應用程序緩存添加或者移除某些資源是不難的。你在CACHE：節中指定了你需要緩存的資源，就是這樣。

難的是決定什么資源應該被緩存，什么資源不應該。

對于我來說，明顯需要被緩存的資源包括以下這些：

• CSS文件
• Javascript文件
• 圖像
• 視頻

這些都是離線緩存所需要保留的內容。沒有什么比你離線瀏覽卻看不到圖片更令人沮喪了。更糟糕的還有沒有保留CSS文件使得頁面內容顯示不正確。

既然面對的是遠程文件，那么該如何處理這些文件？有兩種情況需要考慮。

如果網站不是在SSL協議下運行的，遠程資源就能被緩存。在下面的情形中，本地資源以及遠程jQuery庫都被加到了應用程序緩存中。

CACHE MANIFEST

# Created on 20 October 2011

CACHE:

clock.css

clock.js

# Caching the remote file

http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js

然而，一旦網站是在SSL下運行，列在應用程序緩存清單中的內容就必須是本地資源了。需要注意Google Chrome是不受這個限制的——Chrome仍然會保留遠程資源，盡管它們是在SSL下運行的。

很奇怪吧？我希望所有的瀏覽器都能在同樣的規則下運行。

現在，讓我們回到決定哪些資源應該被緩存的問題上去。

制定一個計劃來決定哪些特性要為用戶離線瀏覽保留是很重要的。比如說，如果你的站點和一個數據庫有交互——現在的網站大多數都會和數據庫有連接了——和數據庫交互的頁面被保留顯然不是一個好主意，因為一旦用戶離線瀏覽，這些頁面就會連接數據庫失敗。

這就是為什么需要一個計劃的原因了。如果你確實保留了和數據庫交互的頁面，當用戶離線瀏覽時，你需要將用戶數據保留在某個地方。這個地方可以是cookie，或者你可以保留在本地存儲中。這是HTML5的另外一個令人激動的特性。一旦你決定你需要緩存什么頁面了，你需要保存這個頁面運行時所需要的所有資源。所以任何相關CSS、Javascript、圖像、視頻或者Flash都要被保留。

你不應該緩存什么？

你顯然不應該緩存的是：

• 和數據庫交互的頁面
• 和Web服務交互的頁面
• 需要認證的頁面

盡管應用程序緩存很好，但現實中你仍然需要和外界交互才能繼續工作。在企業中尤其如此。一個離線網站是非常好的，但是一旦什么不能工作，它就不能讓你賺到錢了。

調試緩存清單

現在你已經在緩存中保留資源了，如果你需要調試，你該如何發現緩存中發生了什么？

令人高興的是，Google Chrome提供了一個地址讓你定位到緩存以便查看緩存。在Chrome的地址欄中輸入chrome://appcache-internals 就能打開AppCache Internals 頁面了。

像你看到的那樣，這個頁面列出了緩存清單的當前大小，當它被創建、更新時的大小，這個頁面還列出了緩存中的資源。當你需要看你在緩存中保留了什么時這一點是非常有幫助的。

我發現當你清空你的臨時網絡文件時，緩存中的資源也被刪除，但這和你訪問的網站也有關系。一個確定性刪除緩存的方法是點擊Chrome中的Remove。這確保所有的資源都會被刪除。

應用程序緩存中不討我喜歡的部分

盡管應用程序緩存很好，它仍然有些地方不討我喜歡。

第一不討我喜歡的是它需要為清單設定一個特定的媒體資源類型（a special MIME type）。如果你能訪問你的Web服務器，這當然沒什么問題。但是在共享服務器上，有時候這卻是做不到的。如果你不創建這樣一個媒體資源類型，你就什么都做不了。

使用應用程序緩存的另外一個不好的地方是使用了它們會帶來一些不便。舉個例子，如果有一個頁面叫做default.html，如果這個頁面被緩存了，當用戶在線時，使用的仍然是這個緩存文件。那么你該如何通知瀏覽器去更新緩存？你需要通知用戶，頁面需要刷新。我們生活在一個Ajax幫我們解決了這些問題的世界里，所以一定還有更好的方式。

緩存CSS文件也是好的，但是如果你保留了任何來自于CSS文件定義的圖片，它們并不會被自動緩存，你需要在緩存清單中顯示指定要保留它們。

應用程序緩存大小限制也是變化的。盡管在規范中并沒有對應用程序緩存大小的限制，但不同瀏覽器和不同設備對其大小都有著不同限制。目前的一些限制如下：

• Safari桌面瀏覽器(Mac以及 Windows)沒有限制
• Mobile Safari限制為10MB
• Chrome限制為5MB
• Android瀏覽器對應用程序緩存大小沒有限制
• Firefox桌面版有無限的應用程序緩存大小
• Opera的應用程序緩存大小可以由用戶管理，但有一個默認大小50MB

緩存清單的有效性

緩存清單很容易創建，但它更容易出錯。

不正確的定位文件很讓人頭疼。幸運的是有緩存清單驗證器Cache Manifest Validator來幫助你減輕調試緩存清單文件錯誤時的痛苦。這是一個很好的工具，要標記下來經常使用。

總結

最后說一點。我的很多工作都是著眼于大型企業用戶。一旦一個應用是離線使用了，就會發出警告。這確實是一個問題。

HTML5通過應用程序緩存實現的離線能力顯然具有很大潛力，但它還不能覆蓋所有應用。任何考慮構建離線瀏覽的人需要考慮用戶擁有的一些根深蒂固的習慣。

英文出自：sitepoint

譯文出自：WebAppTrend

轉載于:https://www.cnblogs.com/mixer/archive/2011/12/19/2448604.html

總結

以上是生活随笔為你收集整理的HTML5离线浏览再进一步的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。