html5離線應用application cache的程式碼詳解
- 黄舟原創
- 2017-04-01 11:09:501549瀏覽
一、應用程式場景
我們通常使用瀏覽器緩存在使用者磁碟上儲存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;">='test.manifest'</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、瀏覽器開始解析
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中文網其他相關文章！