html5離線應用application cache的程式碼詳解-H5教程-PHP中文網

首頁

web前端

H5教程

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

黄舟

Apr 01, 2017 am 11:09 AM

一、應用程式場景

我們通常使用瀏覽器緩存在使用者磁碟上儲存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 ：同上