HTML5离线缓存在tomcat下的部署

1.简介

使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本。

什么是应用程序缓存(Application Cache)?
HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势:

  • 离线浏览 - 用户可在应用离线时使用它们
  • 速度 - 已缓存资源加载得更快
  • 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

2.实现步骤

第一步

在tomcat下的conf/web.xml添加一个mime_type.

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

第二步

编写Manifest 文件
manifest 文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容)。
manifest 文件可分为三个部分:

  • CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
  • NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存
  • FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)

CACHE MANIFEST
第一行,CACHE MANIFEST,是必需的

CACHE MANIFEST  
#VERSION 3.9  
# 直接缓存的文件  
CACHE:  
/html5cache/test.html  
/html5cache/ebt.png  
  
#需要在时间在线的文件  
NETWORK:  
/html5cache/test.js  
/html5cache/damicTest.jsp  

# 替代方案  
FALLBACK:  

第三步

设置文档的 <html> 标签中 manifest 属性:

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

第四步

更新缓存
一旦应用被缓存,它就会保持缓存直到发生下列情况:

  • 用户清空浏览器缓存
  • manifest 文件被修改(参阅下面的提示)
  • 由程序来更新应用缓存

以 "#" 开头的是注释行,但也可满足其他用途。应用的缓存会在其 manifest 文件更改时被更新。如果您编辑了一幅图片,或者修改了一个 JavaScript 函数,这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,067评论 19 139
  • 转载:H5缓存机制浅析-移动端Web加载性能优化【干货】 作者:贺辉超,腾讯游戏平台与社区产品部 高级工程师 目录...
    meng_philip123阅读 11,590评论 6 48
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,830评论 25 709
  • 起源 大部分的网页,必须联网才能访问,这其实也是web的特色,但对于现在的移动互联网时代,设备终端位置不再固定,依...
    白水螺丝阅读 2,598评论 0 4
  • 文/影三郎 北方的七月是一个多雨的季节,雨夜几多惆怅,落笔满是情殇。 --题记 大雨咆哮,肆无忌惮。雨潇潇...
    柠檬成汁阅读 253评论 0 0