使用應用程序緩存，通過創建緩存清單文件，可以輕松地創建web應用程序的脫機版本.

什么是應用緩存?

HTML5 介紹應用程序緩存，這意味著Web應用程序緩存，并且在沒有Internet連接的時候可訪問。

應用程序緩存給出了應用程序的三個優點:

離線瀏覽 - 用戶可以在離線時使用應用程序

速度 - 緩存資源加載速度更快

減少服務器的負載 - 瀏覽器只會從服務器下載更新/更改的資源

瀏覽器支持

表中的數字指定第一個完全支持應用程序緩存的瀏覽器版本.

API

應用程序緩存

4.0

10.0

3.5

4.0

11.5

HTML緩存清單的例子

下面的例子顯示了一個緩存清單的HTML文檔(離線瀏覽):

The content of the document......

緩存清單基礎

要啟用應用程序緩存，請在文檔中包含清單屬性:

...

當用戶訪問它時，將指定具有指定屬性的每一頁。如果未指定清單屬性，則不會緩存該頁(除非頁直接在清單文件中指定).

清單文件的推薦文件擴展名為: ".appcache"

清單文件需要與 正確的媒體類型 一起使用, "text/cache-manifest". 必須配置在web服務器上.

清單文件

清單文件是一個簡單的文本文件，它告訴瀏覽器要緩存什么(以及什么永遠不要緩存)。.

清單文件有三個部分:

CACHE MANIFEST - 此標頭下列出的文件它們首次下載將被緩存

NETWORK - 此標頭下列出的文件需要與服務器連接，而且不會緩存

FALLBACK - 此標頭下列出的文件如果頁面不能訪問的反饋頁面

緩存清單

第一行，CACHE MANIFEST，是必需的

CACHE MANIFEST

/theme.css

/logo.gif

/main.js

上面的清單文件列出了三個資源: 一個CSS文件，GIF圖像，和一個JavaScript文件.

當加載清單文件時，瀏覽器將從網站的根目錄下載三個文件。.

然后，每當用戶沒有連接到Internet，資源仍然可用.

NETWORK

NETWORK 下一節指定文件“login.asp”永遠不應該被緩存，并且不能脫機使用:

NETWORK:

login.asp

星號可以用來表示所有其他資源/文件需要互聯網連接:

NETWORK:

*

FALLBACK

FALLBACK 下面指定的"offline.html"將服務于所有文件放在/HTML/目錄，如果網絡連接不能建立

FALLBACK:

/html/ /offline.html

注意: 第一個URI是資源, 第二行是fallback.

更新緩存

一旦應用程序被緩存，它將一直緩存，直到下面其中一種情況發生:

用戶清除瀏覽器的緩存

清單文件被修改(見下面的提示)

應用程序緩存是以編程方式更新

實例 - 完整的緩存清單文件

CACHE MANIFEST

# 2012-02-21 v1.0.0

/theme.css

/logo.gif

/main.js

NETWORK:

login.asp

FALLBACK:

/html/ /offline.html

提示: 以"#"打頭的是注釋行, 但也可以服務另一個目的.應用程序的緩存只在其清單文件更改時更新. 如果你編輯一個圖像或JavaScript功能的變化，這些變化會不會重新緩存. 在注釋行中更新日期和版本是使瀏覽器重新緩存文件的一種方法.

應用程序緩存注意事項

小心你緩存的東西.

一旦文件被緩存，瀏覽器將繼續顯示緩存的版本，即使你改變服務器上的文件。要確保瀏覽器更新緩存，您需要更改清單文件.

注意: 瀏覽器會緩存數據的不同尺寸的限制(一些瀏覽器站點一5MB限制).

總結

以上是生活随笔為你收集整理的html应用缓存,HTML5应用缓存的全部內容，希望文章能夠幫你解決所遇到的問題。

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