Html5 引入了應用程序緩存,這意味著web應用可以進行緩存,并且可以在沒有網絡連接的時候進行訪問。
1.1 什么是Cache Manifest
首先manifest是一個后綴名為minifest
或者appcache
,的文件,在文件中定義那些需要緩存的文件,支持manifest的瀏覽器,會將按照manifest文件的規則,像文件保存在本地,從而在沒有網絡鏈接的情況下,也能訪問頁面。
當我們第一次正確配置appcache后,當我們再次訪問該應用時,瀏覽器會首先檢查manifest文件是否有變動,如果有變動就會把相應的變得跟新下來,同時改變瀏覽器里面的appcache,如果沒有變動,就會直接把appcache的資源返回,基本流程是這樣的。
1.2 應用緩存的優勢:
(1) 離線瀏覽:用戶可以在應用離線時使用它們
(2) 速度更快:已緩存資源,加載得更快
(3) 減少服務器負載:瀏覽器只需從服務器刪下載更改過或更新過的資源就可以了。
二、如何使用
有一個web應用有三個文件index.html,a.js,b.css,現在需要把js和css文件緩存起來
1.在index.html里加上<html manifest="test.manifest">
2.test.manifest
清單格式如下
CACHE MANIFEST#上面一句必須#v1.0.0#需要緩存的文件CACHE:a.jsb.css#不需要緩存的文件NETWORK:*#無法訪問頁面FALLBACK:404.html
3.manifest文件的mime-type必須是 text/cache-manifest
類型 manifest文件,基本格式為三段: CACHE, NETWORK,與 FALLBACK,其中NETWORK和FALLBACK為可選項。
而第一行CACHE MANIFEST為固定格式,必須寫在前面。
以#號開頭的是注釋,一般會在第二行寫個版本號,用來在緩存的文件更新時,更改manifest的作用,可以是版本號,時間戳或者md5碼等等。
CACHE:(必須)
標識出哪些文件需要緩存,可以是相對路徑也可以是絕對路徑。
CACHE:a.csshttp://yanhaijing.com/a.css
NETWORK:(可選)
這一部分是要繞過緩存直接讀取的文件,可以使用通配符*。
下面的代碼 “login.asp” 永遠不會被緩存,且離線時是不可用的:
NETWORK:login.asp
可以使用星號來指示所有其他資源/文件都需要因特網連接:NETWORK:*
FALLBACK:(可選)
指定了一個后備頁面,當資源無法訪問時,瀏覽器會使用該頁面。該段落的每條記錄都列出兩個URI—第一個表示資源,第二個表示后備頁面。兩個 URI 都必須使用相對路徑并且與清單文件同源。可以使用通配符。
下面的例子中,如果無法建立因特網連接,則用 “404.html” 替代 /html5/ 目錄中的所有文件。
FALLBACK:/html5/ /404.html
下面的例子中,則用 “404.html” 替代所有文件。
FALLBACK:*.html /404.html
如何更新緩存
如下三種方式,可以更新緩存:
更新manifest文件
通過javascript操作
清除瀏覽器緩存
給manifest添加或刪除文件,都可更新緩存,如果我們更改了js,而沒有新增或刪除,前面例子中注釋中的版本號,可以很好的用來更新manifest文件。
html5中引入了js操作離線緩存的方法,下面的js可以手動更新本地緩存。
window.applicationCache.update();
如果用戶清除了瀏覽器緩存(手動或用其他一些工具)都會重新下載文件。
注意事項
瀏覽器對緩存數據的容量限制可能不太一樣(某些瀏覽器設置的限制是每個站點 5MB)。
如果manifest文件,或者內部列舉的某一個文件不能正常下載,整個更新過程都將失敗,瀏覽器繼續全部使用老的緩存。
引用manifest的html必須與manifest文件同源,在同一個域下。
FALLBACK中的資源必須和manifest文件同源。
當一個資源被緩存后,該瀏覽器直接請求這個絕對路徑也會訪問緩存中的資源。
站點中的其他頁面即使沒有設置manifest屬性,請求的資源如果在緩存中也從緩存中訪問。
當manifest文件發生改變時,資源請求本身也會觸發更新。
對于每個index.html?id=1或index.html?id=2都會分別緩存index.html頁面,可以通過chrome瀏覽器Resources/Application Cache
觀察
如果想更新緩存內容,只要修改下manifest文件即可,如改版本號v1.0.1
離線存儲如果資源有更新,可以通過如下代碼來監聽,但第一次加載還會是原來的版本
window.applicationCache.addEventListener('updateready',function(e){ if(window.applicationCache.status == window.applicationCache.UPDATEREADY){ window.applicationCache.swapCache(); if(confirm("loding new?")){ window.location.reload() } }},false);
實踐代碼
html代碼
<!DOCTYPE html>
<html manifest="test.manifest">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/test.css"/>
<link rel="stylesheet" type="text/css" href="css/network.css"/>
<script type="text/javascript" src="js/test.js" ></script>
</head>
<body>
<div id="box"></div>
</body>
</html>
test.manifest代碼
CACHE MANIFEST
## v 1.3
CACHE:
./css/test.css
./js/test.js
NETWORK:
./css/network.css
FALLBACK: