站長資訊網(wǎng)
        最全最豐富的資訊網(wǎng)站

        html5離線應(yīng)用application cache的代碼詳解

        一、應(yīng)用場景

        我們通常使用瀏覽器緩存在用戶磁盤上存儲web單頁,在用戶再次瀏覽的時候已節(jié)省帶寬,但即便這樣,依然無法在沒有Internet的情況下訪問Web。為了讓web應(yīng)用程序在離線狀態(tài)也能被訪問。html5通過application cache API提供離線存儲功能。前提是你需要訪問的web頁面至少被在線訪問過一次。

        離線本地存儲和傳統(tǒng)的瀏覽器緩存有什么不同呢?

        1、瀏覽器緩存主要包含兩類:

        a.緩存協(xié)商:Last-modified,Etag

        瀏覽器向服務(wù)器詢問頁面是否被修改過,如果沒有修改就返回304,瀏覽器直接瀏覽本地緩存文件。否則服務(wù)器返回新內(nèi)容。

        b.徹底緩存:cache-control,Expires

        通過Expires設(shè)置緩存失效時間,在失效之前不需要再跟服務(wù)器請求交互。

        2、離線存儲為整個web提供服務(wù),瀏覽器緩存只緩存單個頁面;

        3、離線存儲可以指定需要緩存的文件和哪些文件只能在線瀏覽,瀏覽器緩存無法指定;

        4、離線存儲可以動態(tài)通知用戶進(jìn)行更新。

        二、如何實(shí)現(xiàn)

        離線存儲是通過manifest文件來管理的,需要服務(wù)器端的支持,不同的服務(wù)器開啟支持的方式也是不同的。

        CACHE MANIFEST//必須以這個開頭  version 1.0 //最好定義版本,更新的時候只需修改版本號  CACHE:      m.png      test.js      test.css  NETWORK:      *  FALLBACK      online.html offline.html

        CACHE指定需要緩存的文件;NETWORK指定只有通過聯(lián)網(wǎng)才能瀏覽的文件,*代表除了在CACHE中的文件;FALLBACK每行分別指定在線和離線時使用的文件

        要讓manifest管理存儲,還需要在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動態(tài)控制更新

        applicationCache對象提供個了一些方法和事件,管理離線存儲的交互過程。通過在firefox8.0的控制臺中輸入window.applicationCache可以看到這個對象的所

        有屬性和事件方法。

        applicationCache.onchecking = function(){     //檢查manifest文件是否存在  }    applicationCache.ondownloading = function(){     //檢查到有manifest或者manifest文件     //已更新就執(zhí)行下載操作     //即使需要緩存的文件在請求時服務(wù)器已經(jīng)返回過了  }    applicationCache.onnoupdate = function(){     //返回304表示沒有更新,通知瀏覽器直接使用本地文件  }    applicationCache.onprogress = function(){     //下載的時候周期性的觸發(fā),可以通過它     //獲取已經(jīng)下載的文件個數(shù)  }    applicationCache.oncached = function(){     //下載結(jié)束后觸發(fā),表示緩存成功  }    application.onupdateready = function(){     //第二次載入,如果manifest被更新     //在下載結(jié)束時候觸發(fā)     //不觸發(fā)onchched     alert("本地緩存正在更新中。。。");     if(confirm("是否重新載入已更新文件")){         applicationCache.swapCache();         location.reload();     }  }    applicationCache.onobsolete = function(){     //未找到文件,返回404或者401時候觸發(fā)  }    applicationCache.onerror = function(){     //其他和離線存儲有關(guān)的錯誤  }

        四、瀏覽器與服務(wù)器的交互

        曾經(jīng)有面試題是這樣的:"描述在瀏覽器的地址欄中輸入:www.baidu.com 后發(fā)生了什么?"。

        1、服務(wù)端返回baidu頁面資源,瀏覽器載入html

        2、瀏覽器開始解析

        3、發(fā)現(xiàn)link,發(fā)送請求載入css文件

        4、瀏覽器渲染頁面

        5、發(fā)現(xiàn)圖片,發(fā)送請求載入圖片,并重新渲染

        6、發(fā)送請求js文件,阻塞渲染。如果js對dom進(jìn)行了操作,則會進(jìn)行rerender

        對于支持離線存儲的頁面,瀏覽器和服務(wù)器的交互又是如何呢?

        首次載入頁面:

        1-6 : 同上

        7:請求頁面中需要緩存的頁面和數(shù)據(jù),就算在之前的步驟中已經(jīng)請求過(這是個耗能的地方)

        8:服務(wù)器返回所有請求文件,瀏覽器進(jìn)行本地存儲

        再次載入頁面:

        1:發(fā)送請求

        2:使用本地存儲的離線文件

        3:解析頁面

        4:請求服務(wù)端的manifest文件,判斷是否有改變,返回304則表示沒有改變進(jìn)入步驟5,否則進(jìn)入步驟6

        5:進(jìn)入首次載入頁面的7-8

        6:使用本地存儲,不重新請求

        贊(0)
        分享到: 更多 (0)
        網(wǎng)站地圖   滬ICP備18035694號-2    滬公網(wǎng)安備31011702889846號
        主站蜘蛛池模板: 精品亚洲A∨无码一区二区三区| 国产精品999| 精品一区二区三区无码免费视频 | 激情亚洲一区国产精品| 精品无人区无码乱码大片国产| 热99re久久国超精品首页| 精品无码一区二区三区爱欲| 欧美黑人巨大videos精品| 成人国产精品一区二区视频| 国产精品欧美日韩| 99精品国产在热久久无毒不卡| 亚洲乱码精品久久久久..| 精品无码国产污污污免费网站国产 | 久久夜色撩人精品国产小说| 国产高清一级毛片精品| 91精品成人免费国产片| 欧美精品在线一区| 久久精品嫩草影院| 精品久久久久久综合日本| 2021最新国产精品网站| 国产精品无码无需播放器| 久久99久久99精品免视看动漫| 亚洲精品无码鲁网中文电影| 亚洲人成国产精品无码| 亚洲国产精品成人网址天堂| 亚洲国产91精品无码专区| 麻豆国内精品久久久久久| 久久精品国产第一区二区| 久久久国产精品| 欧美日韩精品一区二区视频 | 97久久超碰国产精品旧版| 国产精品久久久亚洲| 丰满人妻熟妇乱又仑精品| 国精品无码一区二区三区在线| 久久久久久亚洲精品成人 | 伊人久久精品无码二区麻豆| 亚洲精品国产高清嫩草影院 | 亚洲精品尤物yw在线影院| 亚洲日韩精品一区二区三区 | 四虎精品成人免费观看| 91精品久久久久久无码|