HTML5離線緩存在tomcat下部署可實現圖片flash等離線瀏覽_HTML5教程
推薦：HTML5使用ApplicationCache接口實現離線緩存技術解決離線難題離線訪問對基于網絡的應用而言越來越重要,雖然所有瀏覽器都有緩存機制，但它們并不可靠,HTML5 使用 ApplicationCache 接口解決了由離線帶來的部分難題,需要的朋友可以參考下
打開一個網頁，加載完后，如果突然斷網了，那么你刷新后那頁面就沒了。有沒有想過，刷新后頁面還是剛剛才頁面，在新窗口中再打開一個頁面，輸入相同的網址，在斷網的狀態下打開還是原來那個頁面。。HTML5的離線應用正提供了這樣一個功能。
在頁面中的數據加載時，你可以自己設定一些要緩存的圖片、flash、css、js、html等文件，等下次不能聯網的情況下，你可以用那些緩存的文件。這就是HTML5的離線應用。
其實它實現起來很簡單。
需要服務器。這里用tomcat服務器來講解。
首先要先把.manifest后綴的文件 的mine類型配置為text/cache-manifest。
一講到tomcat配置，熟悉的朋友自然就會想到web.xml這個文件，沒錯，在文件中加入如下配置就行：
復制代碼 代碼如下:www.ghpqjb.com
<mime-mapping>
<extension>manifest</extension>
<mime-type>text/cache-manifest</mime-type>
</mime-mapping>
然后寫一個xxx.manifest文件，xxx是你自己取的一個名字。這個文件的格式是這樣的：
復制代碼 代碼如下:www.ghpqjb.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打開后，找到了緩存文件的具體信息：
讀者有興趣可以自己去嘗試一下，看會不會有新發現。
分享：html5 application cache遇到的嚴重問題在我們的3G版網站的項目中使用了html5 application cache，將大部分圖片資源、js、css等靜態資源放在manifest文件中,需要了解的朋友可以參考下
相關HTML5教程：
- 只要五步 就可以用HTML5/CSS3快速制作便簽貼特效(圖)
- 網易微博Web App用HTML5開發的過程介紹
- HTML5 對各個標簽的定義與規定：body的介紹
- 關于HTML5的安全問題開發人員需要牢記的
- 關于HTML5的22個初級技巧(圖文教程)
- 開發人員所需要知道的HTML5性能分析面面觀
- HTML5 Web Database 數據庫的SQL語句的使用方法
- HTML5實踐-圖片設置成灰度圖
- HTML5安全介紹之內容安全策略（CSP）簡介
- HTML5 Web存儲方式的localStorage和sessionStorage進行數據本地存儲案例應用
- Bootstrap 學習分享
- input元素的url類型和email類型簡介
- 相關鏈接：
- 教程說明：
HTML5教程-HTML5離線緩存在tomcat下部署可實現圖片flash等離線瀏覽
。