HTML5 應(yīng)用程序緩存
什么是應(yīng)用程序緩存技術(shù)?Application Cache
HTML5引入了應(yīng)用程序緩存技術(shù)，意味著web應(yīng)用可進(jìn)行緩存，并在沒有網(wǎng)絡(luò)的情況下使用，通過創(chuàng)建cache manifest文件，可以輕松的創(chuàng)建離線應(yīng)用。
Application Cache帶來的三個(gè)優(yōu)勢(shì)是：
① 離線瀏覽
② 提升頁面載入速度
③ 降低服務(wù)器壓力
而且主要瀏覽器皆以支持Application Cache，就算不支持也不會(huì)對(duì)程序造成什么影響
什么是Cache Manifest
首先manifest是一個(gè)后綴名為minifest的文件，在文件中定義那些需要緩存的文件，支持manifest的瀏覽器，會(huì)將按照manifest文件的規(guī)則，像文件保存在本地，從而在沒有網(wǎng)絡(luò)鏈接的情況下，也能訪問頁面。
當(dāng)我們第一次正確配置app cache后，當(dāng)我們?cè)俅卧L問該應(yīng)用時(shí)，瀏覽器會(huì)首先檢查manifest文件是否有變動(dòng)，如果有變動(dòng)就會(huì)把相應(yīng)的變得跟新下來，同時(shí)改變?yōu)g覽器里面的app cache，如果沒有變動(dòng)，就會(huì)直接把a(bǔ)pp cache的資源返回，基本流程是這樣的。
Manifest的特點(diǎn)
離線瀏覽: 用戶可以在離線狀態(tài)下瀏覽網(wǎng)站內(nèi)容。
更快的速度: 因?yàn)閿?shù)據(jù)被存儲(chǔ)在本地，所以速度會(huì)更快.
減輕服務(wù)器的負(fù)載: 瀏覽器只會(huì)下載在服務(wù)器上發(fā)生改變的資源。
如何使用
html新增了一個(gè)manifest屬性，可以用來指定當(dāng)前頁面的manifest文件。
創(chuàng)建一個(gè)和html同名的manifest文件，比如頁面為index.html，那么可以建一個(gè)index.manifest的文件，然后給index.html的html標(biāo)簽添加如下屬性即可：
<html manifest="index.manifest">
Manifest文件
接下來詳細(xì)說說manifest的細(xì)節(jié)，一個(gè)典型的manifest文件代碼結(jié)構(gòu)像下面這樣：
CACHE MANIFEST#version 1.3CACHE: ? ?test.cssNETWORK:*
manifest文件，基本格式為三段： CACHE， NETWORK，與 FALLBACK，其中NETWORK和FALLBACK為可選項(xiàng)。
而第一行CACHE MANIFEST為固定格式，必須寫在前面。
以#號(hào)開頭的是注釋，一般會(huì)在第二行寫個(gè)版本號(hào)，用來在緩存的文件更新時(shí)，更改manifest的作用，可以是版本號(hào)，時(shí)間戳或者md5碼等等。
CACHE:（必須）
標(biāo)識(shí)出哪些文件需要緩存，可以是相對(duì)路徑也可以是絕對(duì)路徑。
a.csshttp://yanhaijing.com/a.css
NETWORK:（可選）
這一部分是要繞過緩存直接讀取的文件，可以使用通配符＊。
下面的代碼 “l(fā)ogin.asp” 永遠(yuǎn)不會(huì)被緩存，且離線時(shí)是不可用的：
NETWORK:login.asp
可以使用星號(hào)來指示所有其他資源/文件都需要因特網(wǎng)連接：
NETWORK:* ###FALLBACK:（可選）
指定了一個(gè)后備頁面，當(dāng)資源無法訪問時(shí)，瀏覽器會(huì)使用該頁面。該段落的每條記錄都列出兩個(gè) URI—第一個(gè)表示資源，第二個(gè)表示后備頁面。兩個(gè) URI 都必須使用相對(duì)路徑并且與清單文件同源。可以使用通配符。
下面的例子中，如果無法建立因特網(wǎng)連接，則用 “404.html” 替代 /html5/ 目錄中的所有文件。
FALLBACK:/html5/ /404.html
下面的例子中，則用 “404.html” 替代所有文件。
FALLBACK:*.html /404.html
如何更新緩存
如下三種方式，可以更新緩存：
更新manifest文件
通過javascript操作
清除瀏覽器緩存
給manifest添加或刪除文件，都可更新緩存，如果我們更改了js，而沒有新增或刪除，前面例子中注釋中的版本號(hào)，可以很好的用來更新manifest文件。
html5中引入了js操作離線緩存的方法，下面的js可以手動(dòng)更新本地緩存。
window.applicationCache.update();
如果用戶清除了瀏覽器緩存（手動(dòng)或用其他一些工具）都會(huì)重新下載文件。
注意事項(xiàng)
瀏覽器對(duì)緩存數(shù)據(jù)的容量限制可能不太一樣（某些瀏覽器設(shè)置的限制是每個(gè)站點(diǎn) 5MB）。
如果manifest文件，或者內(nèi)部列舉的某一個(gè)文件不能正常下載，整個(gè)更新過程都將失敗，瀏覽器繼續(xù)全部使用老的緩存。
引用manifest的html必須與manifest文件同源，在同一個(gè)域下。
FALLBACK中的資源必須和manifest文件同源。
當(dāng)一個(gè)資源被緩存后，該瀏覽器直接請(qǐng)求這個(gè)絕對(duì)路徑也會(huì)訪問緩存中的資源。
站點(diǎn)中的其他頁面即使沒有設(shè)置manifest屬性，請(qǐng)求的資源如果在緩存中也從緩存中訪問。
當(dāng)manifest文件發(fā)生改變時(shí)，資源請(qǐng)求本身也會(huì)觸發(fā)更新。
實(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)是一種使瀏覽器重新緩存文件的辦法。
