083_html5应用程序缓存
1. 使用html5, 通過創(chuàng)建cache manifest文件, 可以輕松地創(chuàng)建web應(yīng)用的離線版本。
2. 什么是應(yīng)用程序緩存(Application Cache)?
2.1. html5引入了應(yīng)用程序緩存, 這意味著web應(yīng)用可進(jìn)行緩存, 并可在沒有因特網(wǎng)連接時(shí)進(jìn)行訪問。
2.2. 應(yīng)用程序緩存為應(yīng)用帶來三個(gè)優(yōu)勢:
?2.2.1. 離線瀏覽: 用戶可在應(yīng)用離線時(shí)使用它們。
?2.2.2. 速度: 已緩存資源加載得更快。
?2.2.3. 減少服務(wù)器負(fù)載: 瀏覽器將只從服務(wù)器下載更新過或更改過的資源。
3. 瀏覽器支持
3.1. 所有主流瀏覽器均支持應(yīng)用程序緩存, 除了Internet Explorer。
4. Cache Manifest基礎(chǔ)
4.1. 如需啟用應(yīng)用程序緩存, 請?jiān)谖臋n的<html>標(biāo)簽中包含manifest屬性:
<!DOCTYPE HTML> <html manifest="demo.appcache"> ... </html>4.2. 每個(gè)指定了manifest的頁面在用戶對(duì)其訪問時(shí)都會(huì)被緩存。如果未指定manifest屬性, 則頁面不會(huì)被緩存(除非在manifest文件中直接指定了該頁面)。
4.3. manifest文件的建議的文件擴(kuò)展名是: ".appcache"。
4.4. 請注意, manifest文件需要配置正確的MIME-type, 即"text/cache-manifest"。必須在web服務(wù)器上進(jìn)行配置。
4.5. 在Tomcat的web.xml里已經(jīng)自動(dòng)配置了:
5. Manifest文件
5.1. manifest文件是簡單的文本文件, 它告知瀏覽器被緩存的內(nèi)容(以及不緩存的內(nèi)容)。
5.2. manifest文件可分為三個(gè)部分:
?5.2.1. CACHE MANIFEST: 在此標(biāo)題下列出的文件將在首次下載后進(jìn)行緩存。
?5.2.2. NETWORK: 在此標(biāo)題下列出的文件需要與服務(wù)器的連接, 且不會(huì)被緩存。
?5.2.3. FALLBACK: 在此標(biāo)題下列出的文件規(guī)定當(dāng)頁面無法訪問時(shí)的回退頁面(比如: 404頁面)。
5.3. CACHE MANIFEST
?5.3.1. 第一行, CACHE MANIFEST, 是必需的:
CACHE MANIFEST /theme.css /logo.gif /main.js?5.3.2. 上面的manifest文件列出了三個(gè)資源: 一個(gè)CSS文件, 一個(gè)GIF圖像, 以及一個(gè)JavaScript文件。當(dāng)manifest文件加載后, 瀏覽器會(huì)從網(wǎng)站的根目錄下載這三個(gè)文件。然后, 無論用戶何時(shí)與因特網(wǎng)斷開連接, 這些資源依然是可用的。
5.4. NETWORK
?5.4.1. 下面的NETWORK小節(jié)規(guī)定文件"login.jsp"永遠(yuǎn)不會(huì)被緩存, 且離線時(shí)是不可用的:
NETWORK: login.jsp? 5.4.2. 可以使用星號(hào)來指示所有其他資源、文件都需要因特網(wǎng)連接:
NETWORK: *5.5. FALLBACK
?5.5.1. 下面的FALLBACK小節(jié)規(guī)定如果無法建立因特網(wǎng)連接, 則用"404.html"替代myhtml/目錄中的所有文件:
FALLBACK: /myhtml/ 404.html?5.5.2. 第一個(gè)URI是資源, 第二個(gè)是替補(bǔ)。
6. 更新緩存
6.1. 一旦應(yīng)用被緩存, 它就會(huì)保持緩存直到發(fā)生下列情況:
?6.1.1. 用戶清空瀏覽器緩存。
?6.1.2. manifest文件被修改。
?6.1.3. 由程序來更新應(yīng)用緩存。
6.2. 實(shí)例 - 完整的Manifest文件
CACHE MANIFEST # 2012-02-21 v1.0.0 /theme.css /logo.gif /main.jsNETWORK: login.jspFALLBACK: /myhtml/ 404.html6.3. 重要的提示: 以"#"開頭的是注釋行, 但也可滿足其他用途。應(yīng)用的緩存會(huì)在其manifest文件更改時(shí)被更新。如果您編輯了一幅圖片, 或者修改了一個(gè)JavaScript函數(shù), 這些改變都不會(huì)被重新緩存。更新注釋行中的日期和版本號(hào)是一種使瀏覽器重新緩存文件的辦法。
7. 瀏覽器對(duì)緩存數(shù)據(jù)的容量限制可能不太一樣(某些瀏覽器設(shè)置的限制是每個(gè)站點(diǎn)5MB)。
8. 例子
8.1. 編寫manifest.html
<!DOCTYPE html> <html manifest="demo.appcache"><head><meta charset="utf-8" /><title>應(yīng)用程序緩存</title></head><body><script type="text/javascript" src="demo.js"></script><p id="timePara"><button onclick="getDateTime()">獲得日期和事件</button></p><p><img src="w3school_banner.gif" /></p><p>請打開<a href="manifest.html" target="_blank">這個(gè)頁面</a>, 然后脫機(jī)瀏覽, 重新加載頁面。頁面中的腳本和圖像依然可用。</p></body> </html>8.2. demo.js
function getDateTime() {var d = new Date();document.getElementById('timePara').innerHTML=d; }8.3. demo.appcache
CACHE MANIFEST /demo.js /w3school_banner.gif8.4. 新建一個(gè)名為ApplicationCache的動(dòng)態(tài)Web工程
8.5. 啟動(dòng)服務(wù)器, 訪問manifest.html
8.6. 關(guān)閉服務(wù)器, 訪問manifest.html
總結(jié)
以上是生活随笔為你收集整理的083_html5应用程序缓存的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 082_html5Web存储
- 下一篇： 084_html5WebWorkers