DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5詳解 >> HTML5離線緩存在tomcat下部署可實現圖片flash等離線浏覽
HTML5離線緩存在tomcat下部署可實現圖片flash等離線浏覽
編輯:HTML5詳解     
打開一個網頁,加載完後,如果突然斷網了,那麼你刷新後那頁面就沒了。 
有沒有想過,刷新後頁面還是剛剛才頁面,在新窗口中再打開一個頁面,輸入相同的網址,在斷網的狀態下打開還是原來那個頁面。。Html5的離線應用正提供了這樣一個功能。 
在頁面中的數據加載時,你可以自己設定一些要緩存的圖片、Flash、CSS、JS、html等文件,等下次不能聯網的情況下,你可以用那些緩存的文件。這就是Html5的離線應用。 
其實它實現起來很簡單。

需要服務器。這裡用tomcat服務器來講解。 
首先要先把.manifest後綴的文件 的mine類型配置為text/cache-manifest。 
一講到tomcat配置,熟悉的朋友自然就會想到web.XML這個文件,沒錯,在文件中加入如下配置就行: 

復制代碼代碼如下:www.mb5u.com
<mime-mapping> 
<extension>manifest</extension> 
<mime-type>text/cache-manifest</mime-type> 
</mime-mapping> 

然後寫一個xxx.manifest文件,xxx是你自己取的一個名字。這個文件的格式是這樣的: 

復制代碼代碼如下:www.mb5u.com
CACHE MANIFEST 
#version 1.5 
CACHE: 
MyTest.Html 
CSS/main.CSS 
Javascript/bwH5LS.JS 
exp-calif-logo.gif 

第一行是必須的,它標識這是manifest的配置文件。 
#version 1.5 
這句是注釋,沒實際的作用,我在這裡只是想讓浏覽器更新緩存文件。因為當這個manifest文件與原來一樣的時候,浏覽器是不會去重新加載緩存文件的,所以我們可以通過這個注釋,一方面修改版本號,另一方面讓浏覽器更新緩存。 
CACHE: 
這行指示出下面的文件是要緩存的。示例中,緩存了當前頁面:MyTest.Html,以及一些CSS和JS文件 還有圖片。 
還有幾個關鍵字示例中沒提到,就是 
NETWORK: 
FALLBACK: 
NETWORK 指不想緩存的頁面;FALLBACK 是指請求的文件 沒有找到或該文件的服務器沒有響應時的替代方案,比如我們想請求某個嵌套頁面,但這個頁面的服務器連接不上了,那麼我可以轉向另外一個指定的頁面。
這是第二步,第三步,只要在<Html>標簽中加上manifest的位置就行了: 
<Html manifest="NAME.manifest"> 
到這裡,就可以實現簡單的離線應用了。

那些緩存的文件放在哪呢? 
在Chrome上測試,發現它是按自己的機制來分塊保存這些文件的,所以我沒找不到完整的文件。保存的數據在: 
C:\Users\jasonling\AppData\Local\Google\Chrome\User Data\Default 裡面,具體怎麼存,筆者還不了解。 
火狐上的文件也是按它自己的機制來存的,不過筆者本人用sqlite打開後,找到了緩存文件的具體信息: 
讀者有興趣可以自己去嘗試一下,看會不會有新發現。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved