站長資訊網(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∨在线| 欧美精品中文字幕亚洲专区| 99久久免费只有精品国产| 国产麻豆精品一区二区三区v视界 国产麻豆一精品一AV一免费 | 久久久久国产精品麻豆AR影院| 久久精品免费观看| 97久久久精品综合88久久| 欧产日产国产精品精品| 四虎国产精品永久在线无码| 国产69精品久久久久99| 久久精品国产精品青草app| 国产成人精品无码一区二区| 久久久免费精品re6| 亚洲性日韩精品一区二区三区 | 国产精品久久久福利| 国产99视频精品免费专区| 久久香综合精品久久伊人| 四虎国产精品永久在线无码| 久久久久久青草大香综合精品| 国产精品免费在线播放| 亚洲国产精品久久久久| 久久成人精品视频| 九九精品成人免费国产片| 国产精品网站在线观看| 97视频在线观看这里只有精品| 97久久超碰国产精品2021| 黑人巨大精品欧美| 国精品午夜福利视频不卡| 精品久久久无码人妻中文字幕豆芽| 亚洲AV永久无码精品网站在线观看| 亚欧乱色国产精品免费视频| 欧美精品色婷婷五月综合| 免费人成在线观看欧美精品| 91精品国产91久久久久久| 大胸国产精品视频| 影音先锋国产精品国语对白| 欧美一卡2卡3卡四卡海外精品| 国产午夜精品一区理论片| 精品久久久久久| 欧美成人精品一区二区三区|