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