站長(zhǎng)資訊網(wǎng)一、應(yīng)用場(chǎng)景
我們通常使用瀏覽器緩存在用戶磁盤上存儲(chǔ)web單頁，在用戶再次瀏覽的時(shí)候已節(jié)省帶寬，但即便這樣，依然無法在沒有Internet的情況下訪問Web。為了讓web應(yīng)用程序在離線狀態(tài)也能被訪問。html5通過application cache API提供離線存儲(chǔ)功能。前提是你需要訪問的web頁面至少被在線訪問過一次。
離線本地存儲(chǔ)和傳統(tǒng)的瀏覽器緩存有什么不同呢？
1、瀏覽器緩存主要包含兩類：
a.緩存協(xié)商：Last-modified,Etag
瀏覽器向服務(wù)器詢問頁面是否被修改過，如果沒有修改就返回304，瀏覽器直接瀏覽本地緩存文件。否則服務(wù)器返回新內(nèi)容。
b.徹底緩存：cache-control,Expires
通過Expires設(shè)置緩存失效時(shí)間，在失效之前不需要再跟服務(wù)器請(qǐng)求交互。
2、離線存儲(chǔ)為整個(gè)web提供服務(wù)，瀏覽器緩存只緩存單個(gè)頁面；
3、離線存儲(chǔ)可以指定需要緩存的文件和哪些文件只能在線瀏覽，瀏覽器緩存無法指定；
4、離線存儲(chǔ)可以動(dòng)態(tài)通知用戶進(jìn)行更新。
二、如何實(shí)現(xiàn)
離線存儲(chǔ)是通過manifest文件來管理的，需要服務(wù)器端的支持，不同的服務(wù)器開啟支持的方式也是不同的。
CACHE MANIFEST//必須以這個(gè)開頭 version 1.0 //最好定義版本，更新的時(shí)候只需修改版本號(hào) CACHE: m.png test.js test.css NETWORK: * FALLBACK online.html offline.html
CACHE指定需要緩存的文件；NETWORK指定只有通過聯(lián)網(wǎng)才能瀏覽的文件，*代表除了在CACHE中的文件；FALLBACK每行分別指定在線和離線時(shí)使用的文件
要讓manifest管理存儲(chǔ)，還需要在html標(biāo)簽中定義manifest屬性，如下：
<!DOCTYPE HTML>
<html lang="en" manifest='test.manifest'>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
最后別忘了，這些應(yīng)用需要服務(wù)器支持。
Apache服務(wù)器開啟支持的方式是：在conf/mime.types中添加一段代碼：
test/cache-manifest manifest
IIS服務(wù)器開啟方式：
右鍵–HTTP—MIME映射下，單擊文件類型—新建—擴(kuò)展名輸入manifest，類型中輸入test/cache-manifest
三、通過JS動(dòng)態(tài)控制更新
applicationCache對(duì)象提供個(gè)了一些方法和事件，管理離線存儲(chǔ)的交互過程。通過在firefox8.0的控制臺(tái)中輸入window.applicationCache可以看到這個(gè)對(duì)象的所
有屬性和事件方法。
applicationCache.onchecking = function(){ //檢查manifest文件是否存在 } applicationCache.ondownloading = function(){ //檢查到有manifest或者manifest文件 //已更新就執(zhí)行下載操作 //即使需要緩存的文件在請(qǐng)求時(shí)服務(wù)器已經(jīng)返回過了 } applicationCache.onnoupdate = function(){ //返回304表示沒有更新，通知瀏覽器直接使用本地文件 } applicationCache.onprogress = function(){ //下載的時(shí)候周期性的觸發(fā)，可以通過它 //獲取已經(jīng)下載的文件個(gè)數(shù) } applicationCache.oncached = function(){ //下載結(jié)束后觸發(fā)，表示緩存成功 } application.onupdateready = function(){ //第二次載入，如果manifest被更新 //在下載結(jié)束時(shí)候觸發(fā) //不觸發(fā)onchched alert("本地緩存正在更新中。。。"); if(confirm("是否重新載入已更新文件")){ applicationCache.swapCache(); location.reload(); } } applicationCache.onobsolete = function(){ //未找到文件，返回404或者401時(shí)候觸發(fā) } applicationCache.onerror = function(){ //其他和離線存儲(chǔ)有關(guān)的錯(cuò)誤 }
四、瀏覽器與服務(wù)器的交互
曾經(jīng)有面試題是這樣的："描述在瀏覽器的地址欄中輸入:www.baidu.com 后發(fā)生了什么？"。
1、服務(wù)端返回baidu頁面資源，瀏覽器載入html
2、瀏覽器開始解析
3、發(fā)現(xiàn)link，發(fā)送請(qǐng)求載入css文件
4、瀏覽器渲染頁面
5、發(fā)現(xiàn)圖片，發(fā)送請(qǐng)求載入圖片，并重新渲染
6、發(fā)送請(qǐng)求js文件，阻塞渲染。如果js對(duì)dom進(jìn)行了操作，則會(huì)進(jìn)行rerender
對(duì)于支持離線存儲(chǔ)的頁面，瀏覽器和服務(wù)器的交互又是如何呢？
首次載入頁面：
1-6 ： 同上
7：請(qǐng)求頁面中需要緩存的頁面和數(shù)據(jù)，就算在之前的步驟中已經(jīng)請(qǐng)求過（這是個(gè)耗能的地方）
8：服務(wù)器返回所有請(qǐng)求文件，瀏覽器進(jìn)行本地存儲(chǔ)
再次載入頁面：
1：發(fā)送請(qǐng)求
2：使用本地存儲(chǔ)的離線文件
3：解析頁面
4：請(qǐng)求服務(wù)端的manifest文件，判斷是否有改變，返回304則表示沒有改變進(jìn)入步驟5，否則進(jìn)入步驟6
5：進(jìn)入首次載入頁面的7-8
6：使用本地存儲(chǔ)，不重新請(qǐng)求
