HTML5 應(yīng)用程式快取
HTML5?應(yīng)用程式快取
什麼是應(yīng)用程式快取Application Cache
HTML5引入了應(yīng)用程式快取技術(shù)，意味著web應(yīng)用可進(jìn)行緩存，並在沒(méi)有網(wǎng)路的情況下使用，透過(guò)建立cache manifest文件，可以輕鬆的建立離線應(yīng)用程式。
Application Cache帶來(lái)的三個(gè)優(yōu)點(diǎn)是：
① 離線瀏覽
② 提升頁(yè)面載入速度
③ 降低伺服器壓力
而且主要瀏覽器皆以支援Application Cache，就算不支援也不會(huì)對(duì)程式造成什麼影響
離線儲(chǔ)存技術(shù)
HTML5提出了兩大離線儲(chǔ)存技術(shù)：localstorage與Application Cache，兩者各有應(yīng)用場(chǎng)景；傳統(tǒng)還有離線儲(chǔ)存技術(shù)為Cookie。
經(jīng)過(guò)實(shí)踐我們認(rèn)為localstorage應(yīng)該存儲(chǔ)一些非關(guān)鍵性ajax數(shù)據(jù)，做錦上添花的事情；
Application Cache用於存儲(chǔ)靜態(tài)資源，仍然是乾錦上添花的事情；
而cookie只能保存一小段文字（4096位元組）；所以不能儲(chǔ)存大數(shù)據(jù)，這是cookie與上述快取技術(shù)的差異之一，而因?yàn)镠TTP是無(wú)狀態(tài)的，伺服器為了區(qū)分請(qǐng)求是否來(lái)自同一個(gè)伺服器，需要一個(gè)識(shí)別字串，而這個(gè)任務(wù)就是cookie完成的，這一段文字每次都會(huì)在伺服器與瀏覽器之間傳遞，以驗(yàn)證使用者的權(quán)限。
所以Application Cache的應(yīng)用程式場(chǎng)景不一樣，所以使用也不一致。
Application Cache簡(jiǎn)介
Application Cache的使用要做兩方面的工作：
① 伺服器端需要維護(hù)一個(gè)manifest清單
② 瀏覽器上只需要一個(gè)簡(jiǎn)單的設(shè)定即可
<html ?manifest="demo.appcache">
以範(fàn)例做說(shuō)明：
CACHE MANIFEST CACHE: # 需要緩存的列表 style1.css 1.jpg 01.js http://localhost/applicationcache/02.js http://localhost/applicationcache/zepto.js NETWORK: # 不需要緩存的 4.jpg FALLBACK: # 訪問(wèn)緩存失敗后，備用訪問(wèn)的資源，第一個(gè)是訪問(wèn)源，第二個(gè)是替換文件*.html /offline.html 2.jpg/3.jpg
首先我這裡報(bào)了一個(gè)錯(cuò)誤：
Application Cache Error event: Manifest fetch failed (404)
這個(gè)錯(cuò)誤的原因是：manifest 檔案需要設(shè)定正確的MIME-type，也就是"text /cache-manifest"。必須在web 伺服器上進(jìn)行配置，不同的伺服器不一樣
\APPLICATIONCACHE 01.js 02.js 1.jpg 2.jpg 3.jpg 4.jpg demo.appcache index.html style1.css style2.css web.config zepto.js
這樣一來(lái)便可以離線應(yīng)用了，這個(gè)時(shí)候就算斷網(wǎng)了，那些文件依舊能訪問(wèn)
這裡有一點(diǎn)值得注意，例如這裡不帶/index.html他會(huì)將「applicationcache/」緩存，其實(shí)這個(gè)就是index.html
manifest 檔案可分為三個(gè)部分：
CACHE MANIFEST - 在此標(biāo)題下列出的檔案將在首次下載後進(jìn)行快取
NETWORK - 在此標(biāo)題下列出的檔案需要與伺服器的連接，且不會(huì)被快取
FALLBACK - 在此標(biāo)題下列出的檔案規(guī)定當(dāng)頁(yè)面無(wú)法存取時(shí)的回退頁(yè)面（例如404 頁(yè)面）
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è)面無(wú)法存取時(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è)檔案。然後，無(wú)論用戶何時(shí)與網(wǎng)際網(wǎng)路斷開(kāi)連接，這些資源仍然是可用的。
NETWORK
下面的NETWORK 小節(jié)規(guī)定檔案"login.php" 永遠(yuǎn)不會(huì)被緩存，離線時(shí)是不可用的：
NETWORK:
login .php
可以使用星號(hào)來(lái)指示所有其他其他資源/檔案都需要因特網(wǎng)連線：
NETWORK:
*
FALLBACK
實(shí)例- 完整的Manifest 檔案
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.php
FALLBACK:
/html/ /offline.html
提示:以"#" 開(kāi)頭的是註解行，但也可滿足其他用途。應(yīng)用程式的快取會(huì)在其 manifest 檔案更改時(shí)被更新。如果您編輯了一幅圖片，或修改了一個(gè) JavaScript 函數(shù)，這些變更都不會(huì)重新快取。更新註解行中的日期和版本號(hào)碼是一種使瀏覽器重新快取檔案的方法。
關(guān)於應(yīng)用程式快取的說(shuō)明
請(qǐng)留心快取的內(nèi)容。
一旦檔案被緩存，瀏覽器會(huì)繼續(xù)展示已快取的版本，即使您修改了伺服器上的檔案。為了確保瀏覽器更新緩存，您需要更新 manifest 檔案。
注意:?瀏覽器對(duì)快取資料的容量限制可能不太一樣（某些瀏覽器設(shè)定的限制是每個(gè)網(wǎng)站 5MB）。
