阅读量:0
HTML5 离线缓存（Offline Cache）在 Tomcat 下部署可以实现图片、Flash 等资源的离线浏览。manifest text/cachemanifest HTML5特性之离线缓存V3.7
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览，以下是具体介绍：
### HTML5 离线缓存简介
HTML5 引入了应用程序缓存（Application Cache），使Web应用可以在离线状态下运行，通过创建 manifest 文件，开发者可以指定哪些文件需要被缓存，从而在没有网络连接时依然可以使用这些资源，这对于提升用户体验和减少服务器负载非常有益。
### 在 Tomcat 下配置 HTML5 离线缓存
#### 步骤一：在 Tomcat 的 `conf/web.xml` 文件中添加 MIME 类型
需要在 Tomcat 的配置文件 `conf/web.xml` 中添加对 manifest 文件的 MIME 类型支持，这一步是为了让 Tomcat 能够正确处理 manifest 文件并将其提供给浏览器，具体配置如下：
```xml
```
#### 步骤二：编写 Manifest 文件
Manifest 文件是一个文本文件，用于告诉浏览器哪些资源需要被缓存，哪些资源需要在线访问，以及在无法访问资源时的替代方案，一个典型的 manifest 文件结构如下：
```plaintext
CACHE MANIFEST
#VERSION 3.9
# 直接缓存的文件
CACHE:
/html5cache/test.html
/html5cache/ebt.png
# 需要在时间在线的文件
NETWORK:
/html5cache/test.js
/html5cache/damicTest.jsp
# 替代方案
FALLBACK:
```
**CACHE**：列出需要被缓存的文件。
**NETWORK**：列出需要实时在线访问的文件。
**FALLBACK**：列出替代方案文件，当无法访问某些资源时使用。
#### 步骤三：设置 HTML 文档的 manifest 属性
在 HTML 文档的 `` 标签中添加 `manifest` 属性，并指向 manifest 文件的路径。```html
```
确保 `` 的写法正确，否则会失效。### 更新缓存
一旦应用被缓存，它就会保持缓存直到发生下列情况之一：
1. 用户清空浏览器缓存。
2. manifest 文件被修改（可以通过更新注释行中的日期和版本号来触发）。
3. 由程序来更新应用缓存。
### 示例项目结构
假设项目文件夹为 `D:\Demo`，其结构如下：
```
D:\Demo
├── index.html
├── WEBINF
│ └── web.xml
└── html5cache
├── test.html
├── ebt.png
├── test.js
└── test.manifest
```
### FAQs
#### Q1：为什么有时修改了 manifest 文件但浏览器没有更新缓存？
A1：如果只是修改了 manifest 文件的内容而没有改变其版本号或注释行中的日期，浏览器可能不会检测到变化从而不会更新缓存，解决方法是更新注释行中的日期和版本号以触发浏览器重新缓存文件。
#### Q2：Tomcat 如何解析 HTML5 页面？
A2：Tomcat 本身并不解析 HTML5 页面，而是通过浏览器来解析，Tomcat 只需要正确处理静态资源和提供相应的 MIME 类型即可，HTML5 的新特性如 offline cache、local storage 等都由现代浏览器支持和实现。
HTML5离线缓存与Tomcat部署实现图片、Flash等离线浏览
1. 简介
HTML5离线缓存允许网页在用户首次访问时下载必要的资源，如图片、CSS、JavaScript和Flash等，以便在用户离线或网络连接不稳定时仍然可以浏览和使用这些资源，在Tomcat服务器下部署HTML5离线缓存，可以实现更高效的离线浏览体验。
2. 实现步骤
2.1 创建离线缓存文件
1、创建manifest文件：
创建一个名为cache.manifest的文件，该文件定义了要缓存的资源和离线时的行为。
示例内容：
```plaintext
CACHE MANIFEST
# 20190701
CACHE:
index.html
images/
style.css
script.js
FALLBACK:
/ /offline.html
NETWORK:
```
2、添加缓存资源：
将manifest文件与要缓存的HTML页面放在同一目录下。
在HTML页面中引用manifest文件：
```html
<html manifest="cache.manifest">
```
2.2 配置Tomcat
1、修改web.xml：
在WEBINF/web.xml文件中添加以下配置，以启用HTTP缓存：
```xml
<webapp>
...
<sessionconfig>
<sessiontimeout>120</sessiontimeout>
</sessionconfig>
...
<mimemapping>
<extension>manifest</extension>
<mimetype>text/cachemanifest</mimetype>
</mimemapping>
...
</webapp>
```
2、设置缓存策略：
在Tomcat的conf/web.xml文件中，设置HTTP缓存策略：
```xml
<sessionconfig>
<sessiontimeout>120</sessiontimeout>
</sessionconfig>
```
3. 测试离线缓存
1、首次访问：
访问部署在Tomcat服务器上的HTML页面，此时浏览器会下载所有指定的资源。
2、离线访问：
关闭网络连接，再次访问页面，浏览器将使用缓存的资源。
4. 注意事项
确保manifest文件中的路径正确，与服务器上的资源位置一致。
定期更新manifest文件，以便包含最新的资源版本。
对于Flash内容，需要确保Flash Player已经安装，并且能够处理离线缓存。
5. 归纳
通过以上步骤，可以在Tomcat服务器下部署HTML5离线缓存，实现图片、Flash等资源的离线浏览，提升用户体验和网站性能。
