HTML5離線快取在tomcat下部署可實現圖片flash等離線瀏覽_html5教學技巧

打開一個網頁，載入完後，如果突然斷網了，那麼你刷新後那頁面就沒了。
有沒有想過，刷新後頁面還是剛剛才頁面，在新視窗中再打開一個頁面，輸入相同的網址，在斷網的狀態下打開還是原來那個頁面。 。 HTML5的離線應用程式正提供了這樣一個功能。
在頁面中的資料載入時，你可以自己設定一些要快取的圖片、flash、css、js、html等文件，等下次不能連網的情況下，你可以用那些快取的文件。這就是HTML5的離線應用。
其實它實作起來很簡單。

需要伺服器。這裡用tomcat伺服器來講解。
首先要先把.manifest後綴的檔案 的mine型別設定為text/cache-manifest。
一講到tomcat配置，熟悉的朋友自然就會想到web.xml這個文件，沒錯，在文件中加入如下配置就行：

複製程式碼

程式碼如下:

manifest
text/ cache-manifest

然後寫一個xxx.manifest文件，xxx是你自己取的一個名字。這個檔案的格式是這樣的：

複製代碼

代碼如下:

代碼如下:



代碼如下:

代碼如下:



代碼如下:



代碼如下:



代碼如下:

代碼如下:


代碼如下: 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 是指請求的檔案沒有找到或該檔案的伺服器沒有回應時的替代方案，例如我們想要要求某個巢狀頁面，但這個頁面的伺服器連線不上了，那麼我可以轉向另外一個指定的頁面。 這是第二步，第三步，只要在標籤中加上manifest的位置就行了： 到這裡，就可以實現簡單的離線應用了。 那些快取的檔案放在哪裡呢？ 在chrome上測試，發現它是按自己的機制來分塊保存這些文件的，所以我沒找不到完整的文件。儲存的資料在： C:UsersjasonlingAppDataLocalGoogleChromeUser DataDefault 裡面，具體怎麼存，筆者還不了解。 火狐上的文件也是按它自己的機制來存的，不過筆者本人用sqlite打開後，找到了緩存文件的具體信息： 讀者有興趣可以自己去嘗試一下，看會不會有新發現。