tomcat服務器下，html5下應用程序緩存（緩存js或css或圖片）

時間 2019-11-24

標籤 tomcat 服務器 html5 html 應用程序緩存 css 圖片欄目 Tomcat 简体版

原文原文鏈接

首先老套的記一下優點：css

HTML5 引入了應用程序緩存，這意味着 web 應用可進行緩存，並可在沒有因特網鏈接時進行訪問。
應用程序緩存爲應用帶來三個優點：
離線瀏覽 - 用戶可在應用離線時使用它們
速度 - 已緩存資源加載得更快
減小服務器負載 - 瀏覽器將只從服務器下載更新過或更改過的資源。 html

一：在你的tomcat的安裝包下，找到：在tomcat下的conf/web.xml配置文件：html5

添加一個mime_type：web

添加內容:

  <mime-mapping>
	<extension>manifest</extension>
	<mime-type>text/cache-manifest</mime-type>
  </mime-mapping>

二：在你的web項目下，建一個 .manifest後綴的文件.（路徑本身定）ajax

這裏個人項目的webapp目錄下建：chrome

這裏建了一個manifest目錄：下面有一個cache.manifest文件（文件名能夠隨便命名,）瀏覽器

cache.manifest內容：緩存

CACHE MANIFEST
#version 1.0
#直接緩存的文件
CACHE:
../deploy/resources/css/merge-min.css
../deploy/resources/js/merge-min.js
../images/ajax-loader.gif
../images/icons-36-white.png
../images/icons-18-white.png
#須要在時間在線的文件
NETWORK:

#替代方案
FALLBACK:

其中由三部分組成：tomcat

CACHE MANIFEST - 在此標題下列出的文件將在首次下載後進行緩存
NETWORK - 在此標題下列出的文件須要與服務器的鏈接，且不會被緩存
FALLBACK - 在此標題下列出的文件規定當頁面沒法訪問時的回退頁面（好比 404 頁面）服務器

三：編寫離線緩存的HTML文件

<!DOCTYPE HTML>
<html manifest="../manifest/cache.manifest">

............................................

</html>

好了，這樣就能夠使用html5的應用緩存了,這裏關鍵是每一個地方的路徑要寫對：這點的話，能夠用chrome瀏覽器的

Consonle控制檯來監聽路徑的是否錯誤！

最後檢驗是否應用緩存是否緩存了：我習慣在火狐瀏覽器的debug下監聽：

這裏會顯示多少來自緩存！

同時在火狐的設置裏面：

能夠看到應用程序緩存：localhost爲455kb,和剛纔監聽一致。