HTML5離線緩存在tomcat下部署可實(shí)現(xiàn)圖片flash等離線瀏覽_HTML5教程
推薦:HTML5使用ApplicationCache接口實(shí)現(xiàn)離線緩存技術(shù)解決離線難題離線訪問(wèn)對(duì)基于網(wǎng)絡(luò)的應(yīng)用而言越來(lái)越重要,雖然所有瀏覽器都有緩存機(jī)制,但它們并不可靠,HTML5 使用 ApplicationCache 接口解決了由離線帶來(lái)的部分難題,需要的朋友可以參考下
打開一個(gè)網(wǎng)頁(yè),加載完后,如果突然斷網(wǎng)了,那么你刷新后那頁(yè)面就沒(méi)了。有沒(méi)有想過(guò),刷新后頁(yè)面還是剛剛才頁(yè)面,在新窗口中再打開一個(gè)頁(yè)面,輸入相同的網(wǎng)址,在斷網(wǎng)的狀態(tài)下打開還是原來(lái)那個(gè)頁(yè)面。。HTML5的離線應(yīng)用正提供了這樣一個(gè)功能。
在頁(yè)面中的數(shù)據(jù)加載時(shí),你可以自己設(shè)定一些要緩存的圖片、flash、css、js、html等文件,等下次不能聯(lián)網(wǎng)的情況下,你可以用那些緩存的文件。這就是HTML5的離線應(yīng)用。
其實(shí)它實(shí)現(xiàn)起來(lái)很簡(jiǎn)單。
需要服務(wù)器。這里用tomcat服務(wù)器來(lái)講解。
首先要先把.manifest后綴的文件 的mine類型配置為text/cache-manifest。
一講到tomcat配置,熟悉的朋友自然就會(huì)想到web.xml這個(gè)文件,沒(méi)錯(cuò),在文件中加入如下配置就行:
復(fù)制代碼 代碼如下:m.dounai2.com
<mime-mapping>
<extension>manifest</extension>
<mime-type>text/cache-manifest</mime-type>
</mime-mapping>
然后寫一個(gè)xxx.manifest文件,xxx是你自己取的一個(gè)名字。這個(gè)文件的格式是這樣的:
復(fù)制代碼 代碼如下:m.dounai2.com
CACHE MANIFEST
#version 1.5
CACHE:
MyTest.html
CSS/main.css
Javascript/bwH5LS.js
exp-calif-logo.gif
第一行是必須的,它標(biāo)識(shí)這是manifest的配置文件。
#version 1.5
這句是注釋,沒(méi)實(shí)際的作用,我在這里只是想讓瀏覽器更新緩存文件。因?yàn)楫?dāng)這個(gè)manifest文件與原來(lái)一樣的時(shí)候,瀏覽器是不會(huì)去重新加載緩存文件的,所以我們可以通過(guò)這個(gè)注釋,一方面修改版本號(hào),另一方面讓瀏覽器更新緩存。
CACHE:
這行指示出下面的文件是要緩存的。示例中,緩存了當(dāng)前頁(yè)面:MyTest.html,以及一些css和js文件 還有圖片。
還有幾個(gè)關(guān)鍵字示例中沒(méi)提到,就是
NETWORK:
FALLBACK:
NETWORK 指不想緩存的頁(yè)面;FALLBACK 是指請(qǐng)求的文件 沒(méi)有找到或該文件的服務(wù)器沒(méi)有響應(yīng)時(shí)的替代方案,比如我們想請(qǐng)求某個(gè)嵌套頁(yè)面,但這個(gè)頁(yè)面的服務(wù)器連接不上了,那么我可以轉(zhuǎn)向另外一個(gè)指定的頁(yè)面。
這是第二步,第三步,只要在<html>標(biāo)簽中加上manifest的位置就行了:
<html manifest="NAME.manifest">
到這里,就可以實(shí)現(xiàn)簡(jiǎn)單的離線應(yīng)用了。
那些緩存的文件放在哪呢?
在chrome上測(cè)試,發(fā)現(xiàn)它是按自己的機(jī)制來(lái)分塊保存這些文件的,所以我沒(méi)找不到完整的文件。保存的數(shù)據(jù)在:
C:\Users\jasonling\AppData\Local\Google\Chrome\User Data\Default 里面,具體怎么存,筆者還不了解。
火狐上的文件也是按它自己的機(jī)制來(lái)存的,不過(guò)筆者本人用sqlite打開后,找到了緩存文件的具體信息:
讀者有興趣可以自己去嘗試一下,看會(huì)不會(huì)有新發(fā)現(xiàn)。
分享:html5 application cache遇到的嚴(yán)重問(wèn)題在我們的3G版網(wǎng)站的項(xiàng)目中使用了html5 application cache,將大部分圖片資源、js、css等靜態(tài)資源放在manifest文件中,需要了解的朋友可以參考下
相關(guān)HTML5教程:
- 只要五步 就可以用HTML5/CSS3快速制作便簽貼特效(圖)
- 網(wǎng)易微博Web App用HTML5開發(fā)的過(guò)程介紹
- HTML5 對(duì)各個(gè)標(biāo)簽的定義與規(guī)定:body的介紹
- 關(guān)于HTML5的安全問(wèn)題開發(fā)人員需要牢記的
- 關(guān)于HTML5的22個(gè)初級(jí)技巧(圖文教程)
- 開發(fā)人員所需要知道的HTML5性能分析面面觀
- HTML5 Web Database 數(shù)據(jù)庫(kù)的SQL語(yǔ)句的使用方法
- HTML5實(shí)踐-圖片設(shè)置成灰度圖
- HTML5安全介紹之內(nèi)容安全策略(CSP)簡(jiǎn)介
- HTML5 Web存儲(chǔ)方式的localStorage和sessionStorage進(jìn)行數(shù)據(jù)本地存儲(chǔ)案例應(yīng)用
- Bootstrap 學(xué)習(xí)分享
- input元素的url類型和email類型簡(jiǎn)介
HTML5教程Rss訂閱Div+Css教程搜索
HTML5教程推薦
- html5的新增的標(biāo)簽和廢除的標(biāo)簽簡(jiǎn)要概述
- html5指南-1.html5全局屬性(html5 global attributes)深入理解
- html5之Canvas路徑繪圖、坐標(biāo)變換應(yīng)用實(shí)例
- HTML5中微數(shù)據(jù)概述及在搜索引擎中的使用舉例
- html5指南-7.geolocation結(jié)合google maps開發(fā)一個(gè)小的應(yīng)用
- html5 canvas 畫圖教程案例分析
- HTML5 對(duì)各個(gè)標(biāo)簽的定義與規(guī)定:body的介紹
- 使用CSS實(shí)現(xiàn)彈性視頻html5案例實(shí)踐
- HTML5之SVG 2D入門11—用戶交互性(動(dòng)畫)介紹及應(yīng)用
- HTML5 語(yǔ)音搜索只需一句代碼
- 相關(guān)鏈接:
復(fù)制本頁(yè)鏈接| 搜索HTML5離線緩存在tomcat下部署可實(shí)現(xiàn)圖片flash等離線瀏覽
- 教程說(shuō)明:
HTML5教程-HTML5離線緩存在tomcat下部署可實(shí)現(xiàn)圖片flash等離線瀏覽。