首頁  >  文章  >  web前端  >  html5離線應用application cache的程式碼詳解

html5離線應用application cache的程式碼詳解

黄舟
黄舟原創
2017-04-01 11:09:501560瀏覽

一、應用程式場景

     我們通常使用瀏覽器緩存在使用者磁碟上儲存web單頁,在使用者再次瀏覽的時候已節省頻寬,但即便這樣,依然無法在沒有Internet的情況下存取Web。為了讓web應用程式在離線狀態也能被存取。 html5透過application cache API提供離線儲存功能。前提是你需要造訪的web頁面至少被線上訪問過一次。

    離線本地儲存和傳統的瀏覽器快取有什麼不同呢?

    1、瀏覽器快取主要包含兩類:

##         a.快取協商:Last-modified,Etag

             

             

           沒有修改就回傳304,瀏覽器直接瀏覽本機快取檔案。否則伺服器傳回新內容。

         b.徹底快取:cache-control,Expires

               透過Expires設定快取時間失效,且在失效之前不需要再跟伺服器請求互動。

   2、離線儲存為整個web提供服務,瀏覽器快取只快取單一頁面;

   3、離線儲存可以指定需要快取的檔案和哪些檔案只能在線上瀏覽,瀏覽器快取無法指定;

   4、離線儲存可以動態通知使用者進行

更新

二、如何實現

    離線儲存是透過manifest檔案來管理的,需要伺服器端的支持,不同的伺服器開啟支援的方式也是不同的。

CACHE MANIFEST//必须以这个开头
version 1.0 //最好定义版本,更新的时候只需修改版本号
CACHE:
    m.png
    test.js
    test.css
NETWORK:
    *
FALLBACK
    online.html offline.html
    CACHE指定需要快取的文件;NETWORK指定只有透過連網才能瀏覽的文件,*代表除了在CACHE中的文件;FALLBACK每行分別指定在線和離線時使用的文件    要讓manifest管理存儲,還需要在html標籤

中定義manifest

屬性

,如下:

<span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE HTML</span><span style="color: #0000ff;">></span><br/><span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;"><a href="http://www.php.cn/java/java-ymp-Lang.html" target="_blank">lang</a></span><span style="color: #0000ff;">="en"</span><span style="color: #ff0000;"> manifest</span><span style="color: #0000ff;">=&#39;test.manifest&#39;</span><span style="color: #0000ff;">></span><br/><span style="color: #0000ff;"><</span><span style="color: #800000;"><a href="http://www.php.cn/html/html-HEAD-2.html" target="_blank">head</a></span><span style="color: #0000ff;">></span><br/><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">char<a href="http://www.php.cn/code/8209.html" target="_blank">set</a></span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span><br/><span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span><br/><span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span><br/><span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span><br/><br/><span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span><br/><span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>

    最後別忘了,這些應用程式需要伺服器支援。


    Apache伺服器開啟支援的方式是:在conf/mime.types中新增一段程式碼:

            test/cache-manifest manifest

    IIS伺服器開啟方式:

#          1  右鍵--HT##         ---MIME映射下,按一下檔案類型---新建---副檔名輸入manifest,在類型中輸入test/cache-manifest

 三、透過JS動態控制更新     applicationCache

物件

提供個了一些方法和

事件

,管理離線儲存的互動過程。透過在firefox8.0的控制台中輸入window.applicationCache可以看到這個物件的所       有屬性和事件方法。

applicationCache.onchecking = function(){
   //检查manifest文件是否存在
}

applicationCache.ondownloading = function(){
   //检查到有manifest或者manifest文件
   //已更新就执行下载操作
   //即使需要缓存的文件在请求时服务器已经返回过了
}

applicationCache.onnoupdate = function(){
   //返回304表示没有更新,通知浏览器直接使用本地文件
}

applicationCache.onprogress = function(){
   //下载的时候周期性的触发,可以通过它
   //获取已经下载的文件个数
}

applicationCache.oncached = function(){
   //下载结束后触发,表示缓存成功
}

application.onupdateready = function(){
   //第二次载入,如果manifest被更新
   //在下载结束时候触发
   //不触发onchched
   alert("本地缓存正在更新中。。。");
   if(confirm("是否重新载入已更新文件")){
       applicationCache.swapCache();
       location.reload();
   }
}

applicationCache.onobsolete = function(){
   //未找到文件,返回404或者401时候触发
}

applicationCache.onerror = function(){
   //其他和离线存储有关的错误
}

 四、瀏覽器與伺服器的互動

      曾經有一個面試題目是這樣的:"描述在瀏覽器的網址列中輸入:www.baidu. com 後發生了什麼事?

      1、服務端回傳baidu頁面資源,瀏覽器載入html

      2、瀏覽器開始解析

      3、發現link,傳送請求載入css檔案      4、瀏覽器渲染頁

      5、發現

圖片

,傳送請求載入圖片,並重新渲染

      6、傳送請求js文件,阻塞渲染。如果js對dom進行了操作,則會進行rerender      對於支援離線儲存的頁面,瀏覽器和伺服器的互動又如何呢?

     

第一次載入頁面:

##      1-6 :同上

       7:請求頁面中需要快取的頁面和資料,就算在先前的步驟中已經請求過(這是個耗能的地方)

       8:伺服器傳回所有請求文件,瀏覽器進行本機儲存

     

再次載入頁面:

      1:發送請求

      2:使用本機儲存的離線檔案

      3:解析頁######      4:請求服務端的manifest檔案,是否有####     改變,回傳304則表示沒有改變進入步驟5,否則進入步驟6###

      5:進入第一次載入頁面的7-8

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

以上是html5離線應用application cache的程式碼詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn