HTML5 應(yīng)用程式快取

什麼是應(yīng)用程式快?。ˋpplication Cache）？

HTML5 引入了應(yīng)用程式緩存，這表示 web 應(yīng)用程式可進(jìn)行緩存，並可在沒有網(wǎng)際網(wǎng)路連線時(shí)存取。

應(yīng)用程式快取為應(yīng)用程式帶來三個(gè)優(yōu)點(diǎn)：

##? ?1. ? 離線瀏覽- 使用者可在應(yīng)用離線時(shí)使用它們

? ?2. ? 速度- 已快取資源加載更快

? ?3. ? 減少伺服器負(fù)載- 瀏覽器只會(huì)從伺服器下載更新過或變更過的資源。

HTML5，透過建立 cache manifest 文件，可以輕鬆建立 web 應(yīng)用的離線版本。

瀏覽器支援

Internet Explorer 10, Firefox, Chrome, Safari 和Opera 支援應(yīng)用程式快取.

HTML5 Cache Manifest 實(shí)例

下面的範(fàn)例展示了帶有cache manifest 的HTML 文件（供離線瀏覽）：

<!DOCTYPE html>
<html manifest="demo_html.appcache">
<head>
    <meta charset="UTF-8">
    <title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<script src="demo_time.js">
</script>
<p id="timePara"><button onclick="getDateTime()">獲取日期和時(shí)間</button></p>
<p><img src="http://img.taopic.com/uploads/allimg/130512/240477-130512133S924.jpg" width="336" height="69"></p>
<p>嘗試打開 <a href="" target="_blank">這個(gè)頁(yè)面</a>, 在離線的狀態(tài)下重新載入這個(gè)頁(yè)面，頁(yè)面也可以訪問。</p>
</body>
</html>

Cache Manifest 基礎(chǔ)

如需啟用應(yīng)用程式緩存，請(qǐng)?jiān)谖募?lt;html> 標(biāo)籤中包含manifest 屬性：

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

' 每個(gè)指定了manifest 的頁(yè)面在使用者對(duì)其存取時(shí)都會(huì)被快取。如果未指定 manifest 屬性，則頁(yè)面不會(huì)被快取（除非在 manifest 檔案中直接指定了該頁(yè)面）。 manifest 檔案的建議的檔案副檔名是：".appcache"。

?###請(qǐng)注意###，manifest 檔案需要設(shè)定正確的 MIME-type，即 "text/cache-manifest"。必須在 web 伺服器上進(jìn)行設(shè)定。 ###############Manifest 文件############manifest 文件是簡(jiǎn)單的文字文件，它告知瀏覽器被快取的內(nèi)容（以及不緩存的內(nèi)容）。 ######manifest 檔案可分為三個(gè)部分：############CACHE MANIFEST?- 在此標(biāo)題下列出的檔案將在首次下載後進(jìn)行快取####### ######NETWORK?- 在此標(biāo)題下列出的檔案需要與伺服器的連接，且不會(huì)被快取#############FALLBACK?- 在此標(biāo)題下列出的檔案規(guī)定當(dāng)頁(yè)面無法存取時(shí)的回退頁(yè)面（例如404 頁(yè)面）#################################CACHE MANIFEST#### ############第一行，CACHE MANIFEST，是必需的：############CACHE MANIFEST###/theme.css###/logo. gif###/main.js############上面的manifest 文件列出了三個(gè)資源：一個(gè)CSS 文件，一個(gè)GIF 圖像，以及一個(gè)JavaScript 文件。當(dāng) manifest 檔案載入後，瀏覽器會(huì)從網(wǎng)站的根目錄下載這三個(gè)檔案。然後，無論用戶何時(shí)與網(wǎng)際網(wǎng)路斷開連接，這些資源仍然是可用的。 ###########################NETWORK#############

下面的NETWORK 小節(jié)規(guī)定檔案"login.php" 永遠(yuǎn)不會(huì)被緩存，離線時(shí)是不可用的：

NETWORK:
login.php

可以使用星號(hào)來指示所有其他其他資源/檔案都需要因特網(wǎng)連線：

NETWORK:
*

FALLBACK

下面的FALLBACK 小節(jié)規(guī)定如果無法建立因特網(wǎng)連接，則以"offline.html" 替代/html5/ 目錄中的所有檔案：

FALLBACK:
/html/ /offline.html

注意:?第一個(gè)URI 是資源，第二個(gè)是替補(bǔ)。

更新快取

一旦應(yīng)用程式被緩存，它就會(huì)保持快取直到發(fā)生下列情況：

使用者清空瀏覽器快取
manifest 檔案被修改（請(qǐng)參閱下面的提示）
由程式來更新應(yīng)用快取

#實(shí)例- 完整的Manifest 檔案

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
#/main.js

#NETWORK:
login.php

FALLBACK:
/html/ /offline.html

##提示# :以"#" 開頭的是註解行，但也可滿足其他用途。應(yīng)用程式的快取會(huì)在其 manifest 檔案更改時(shí)被更新。如果您編輯了一幅圖片，或修改了一個(gè) JavaScript 函數(shù)，這些變更都不會(huì)重新快取。更新註解行中的日期和版本號(hào)碼是一種使瀏覽器重新快取檔案的方法。

關(guān)於應(yīng)用程式快取的說明

請(qǐng)留心快取的內(nèi)容。

一旦檔案被緩存，瀏覽器會(huì)繼續(xù)展示已快取的版本，即使您修改了伺服器上的檔案。為了確保瀏覽器更新緩存，您需要更新 manifest 檔案。

注意:?瀏覽器對(duì)快取資料的容量限制可能不太一樣（某些瀏覽器設(shè)定的限制是每個(gè)網(wǎng)站 5MB）。

繼續(xù)學(xué)習(xí)

新建檔案

<!DOCTYPE html> <html manifest="demo_html.appcache"> <head> <meta charset="UTF-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <script src="demo_time.js"> </script> <p id="timePara"><button onclick="getDateTime()">獲取日期和時(shí)間</button></p> <p><img src="http://img.taopic.com/uploads/allimg/130512/240477-130512133S924.jpg" width="336" height="69"></p> <p>嘗試打開 <a href="" target="_blank">這個(gè)頁(yè)面</a>, 在離線的狀態(tài)下重新載入這個(gè)頁(yè)面，頁(yè)面也可以訪問。</p> </body> </html>

提交重置程式碼

自動(dòng)運(yùn)行