導(dǎo)讀：Malcolm Sherida是Microsoft在ASP.NET方面的awarded MVP，精通ASP和Telerik，經(jīng)常在澳大利亞和新西蘭的會(huì)議以及用戶組中做報(bào)告。作為一個(gè)長(zhǎng)期使用ASP.NET的人，他關(guān)注Web技術(shù)超過(guò)10年了。他喜歡使用ASP.NET MVC工作，并喜歡使用jQuery和Javascript。他也為SitePoint和其他一些網(wǎng)站寫一些關(guān)于ASP.NET的技術(shù)文章。

最近，我發(fā)布了一篇博文，內(nèi)容是關(guān)于HTML5的一個(gè)新特性，博文名字是“通過(guò)應(yīng)用程序緩存實(shí)現(xiàn)離線瀏覽”。這篇文章獲得了很好的反響，有人請(qǐng)我再多談一些內(nèi)容，包括：

• 如何決定什么文章應(yīng)該被緩存
• 緩存文件帶來(lái)的影響
• 調(diào)試應(yīng)用程序緩存
• 所以這篇文章是接著上篇文章寫的。如果你還沒有看過(guò)上篇文章，也許你應(yīng)該先去看看。

下面我們將來(lái)看看你應(yīng)該或者不應(yīng)該添加到應(yīng)用程序緩存中的資源。

你應(yīng)該緩存什么？

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

難的是決定什么資源應(yīng)該被緩存，什么資源不應(yīng)該。

對(duì)于我來(lái)說(shuō)，明顯需要被緩存的資源包括以下這些：

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

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

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

如果網(wǎng)站不是在SSL協(xié)議下運(yùn)行的，遠(yuǎn)程資源就能被緩存。在下面的情形中，本地資源以及遠(yuǎn)程jQuery庫(kù)都被加到了應(yīng)用程序緩存中。

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

然而，一旦網(wǎng)站是在SSL下運(yùn)行，列在應(yīng)用程序緩存清單中的內(nèi)容就必須是本地資源了。需要注意Google Chrome是不受這個(gè)限制的——Chrome仍然會(huì)保留遠(yuǎn)程資源，盡管它們是在SSL下運(yùn)行的。

很奇怪吧？我希望所有的瀏覽器都能在同樣的規(guī)則下運(yùn)行。

現(xiàn)在，讓我們回到?jīng)Q定哪些資源應(yīng)該被緩存的問題上去。

制定一個(gè)計(jì)劃來(lái)決定哪些特性要為用戶離線瀏覽保留是很重要的。比如說(shuō)，如果你的站點(diǎn)和一個(gè)數(shù)據(jù)庫(kù)有交互——現(xiàn)在的網(wǎng)站大多數(shù)都會(huì)和數(shù)據(jù)庫(kù)有連接了——和數(shù)據(jù)庫(kù)交互的頁(yè)面被保留顯然不是一個(gè)好主意，因?yàn)橐坏┯脩綦x線瀏覽，這些頁(yè)面就會(huì)連接數(shù)據(jù)庫(kù)失敗。

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

你不應(yīng)該緩存什么？

你顯然不應(yīng)該緩存的是：

• 和數(shù)據(jù)庫(kù)交互的頁(yè)面
• 和Web服務(wù)交互的頁(yè)面
• 需要認(rèn)證的頁(yè)面

盡管應(yīng)用程序緩存很好，但現(xiàn)實(shí)中你仍然需要和外界交互才能繼續(xù)工作。在企業(yè)中尤其如此。一個(gè)離線網(wǎng)站是非常好的，但是一旦什么不能工作，它就不能讓你賺到錢了。

調(diào)試緩存清單

現(xiàn)在你已經(jīng)在緩存中保留資源了，如果你需要調(diào)試，你該如何發(fā)現(xiàn)緩存中發(fā)生了什么？

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

像你看到的那樣，這個(gè)頁(yè)面列出了緩存清單的當(dāng)前大小，當(dāng)它被創(chuàng)建、更新時(shí)的大小，這個(gè)頁(yè)面還列出了緩存中的資源。當(dāng)你需要看你在緩存中保留了什么時(shí)這一點(diǎn)是非常有幫助的。

我發(fā)現(xiàn)當(dāng)你清空你的臨時(shí)網(wǎng)絡(luò)文件時(shí)，緩存中的資源也被刪除，但這和你訪問的網(wǎng)站也有關(guān)系。一個(gè)確定性刪除緩存的方法是點(diǎn)擊Chrome中的Remove。這確保所有的資源都會(huì)被刪除。

應(yīng)用程序緩存中不討我喜歡的部分

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

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

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

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

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

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

緩存清單的有效性

緩存清單很容易創(chuàng)建，但它更容易出錯(cuò)。

不正確的定位文件很讓人頭疼。幸運(yùn)的是有緩存清單驗(yàn)證器Cache Manifest Validator來(lái)幫助你減輕調(diào)試緩存清單文件錯(cuò)誤時(shí)的痛苦。這是一個(gè)很好的工具，要標(biāo)記下來(lái)經(jīng)常使用。

總結(jié)

最后說(shuō)一點(diǎn)。我的很多工作都是著眼于大型企業(yè)用戶。一旦一個(gè)應(yīng)用是離線使用了，就會(huì)發(fā)出警告。這確實(shí)是一個(gè)問題。

HTML5通過(guò)應(yīng)用程序緩存實(shí)現(xiàn)的離線能力顯然具有很大潛力，但它還不能覆蓋所有應(yīng)用。任何考慮構(gòu)建離線瀏覽的人需要考慮用戶擁有的一些根深蒂固的習(xí)慣。

英文出自：sitepoint

譯文出自：WebAppTrend

轉(zhuǎn)載于:https://www.cnblogs.com/mixer/archive/2011/12/19/2448604.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。