HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览


Posted in HTML / CSS onDecember 13, 2012

打开一个网页,加载完后,如果突然断网了,那么你刷新后那页面就没了。
有没有想过,刷新后页面还是刚刚才页面,在新窗口中再打开一个页面,输入相同的网址,在断网的状态下打开还是原来那个页面。。HTML5的离线应用正提供了这样一个功能。
在页面中的数据加载时,你可以自己设定一些要缓存的图片、flash、css、js、html等文件,等下次不能联网的情况下,你可以用那些缓存的文件。这就是HTML5的离线应用。
其实它实现起来很简单。

需要服务器。这里用tomcat服务器来讲解。
首先要先把.manifest后缀的文件 的mine类型配置为text/cache-manifest。
一讲到tomcat配置,熟悉的朋友自然就会想到web.xml这个文件,没错,在文件中加入如下配置就行:

复制代码
代码如下:

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

然后写一个xxx.manifest文件,xxx是你自己取的一个名字。这个文件的格式是这样的:
复制代码
代码如下:

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打开后,找到了缓存文件的具体信息:
读者有兴趣可以自己去尝试一下,看会不会有新发现。

HTML / CSS 相关文章推荐
CSS3 伪类选择器 nth-child()说明
Jul 10 HTML / CSS
HTML5 解析规则分析
Aug 14 HTML / CSS
HTML5 微格式和相关的属性名称
Feb 10 HTML / CSS
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
Jun 04 HTML / CSS
HTML5重塑Web世界它将如何改变互联网
Dec 17 HTML / CSS
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
Jan 09 HTML / CSS
html5中audio支持音频格式的解决方法
Aug 24 HTML / CSS
详解HTML5将footer置于页面最底部的方法(CSS+JS)
Oct 11 HTML / CSS
Canvas 像素处理之改变透明度的实现代码
Jan 08 HTML / CSS
HTML5 Canvas实现放大镜效果示例
Mar 25 HTML / CSS
基于html5 canvas做批改作业的小插件
May 20 HTML / CSS
微信小程序纯CSS实现无限弹幕滚动效果
Sep 23 HTML / CSS
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
Dec 13 #HTML / CSS
使用HTML5的链接预取功能(link prefetching)给网站提速
Dec 13 #HTML / CSS
HTML5 实现一个访问本地文件的实例
Dec 13 #HTML / CSS
HTML4和HTML5之间除了相似以外的10个主要不同
Dec 13 #HTML / CSS
一张图片能隐含千言万语之隐藏你的程序代码
Dec 13 #HTML / CSS
HTML5 新旧语法标记对我们有什么好处
Dec 13 #HTML / CSS
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
Dec 13 #HTML / CSS
You might like
php读取目录及子目录下所有文件名的方法
2014/10/20 PHP
php实现随机显示图片方法汇总
2015/05/21 PHP
php实现过滤字符串中的中文和数字实例
2015/07/29 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
php判断数组是否为空的实例方法
2020/05/10 PHP
jQuery中find()方法用法实例
2015/01/07 Javascript
Node.js事件循环(Event Loop)和线程池详解
2015/01/28 Javascript
Angular 页面跳转时传参问题
2016/08/01 Javascript
Jquery实现上下移动和排序代码
2016/10/17 Javascript
angularJs关于指令的一些冷门属性详解
2016/10/24 Javascript
关于Vue背景图打包之后访问路径错误问题的解决
2017/11/03 Javascript
JavaScript实现微信号随机切换代码
2018/03/09 Javascript
Webpack 之 babel-loader文件预处理器详解
2018/03/23 Javascript
如何在 JavaScript 中更好地利用数组
2018/09/27 Javascript
jquery 时间戳转日期过程详解
2019/10/12 jQuery
Vue项目中使用jsonp抓取跨域数据的方法
2019/11/10 Javascript
微信小程序实现上传多个文件 超过10个
2020/03/30 Javascript
Flask框架的学习指南之用户登录管理
2016/11/20 Python
使用python 3实现发送邮件功能
2018/06/15 Python
Python 输入一个数字判断成绩分数等级的方法
2018/11/15 Python
详解Python 实现 ZeroMQ 的三种基本工作模式
2020/03/24 Python
基于python实现查询ip地址来源
2020/06/02 Python
python如何停止递归
2020/09/09 Python
python 使用tkinter+you-get实现视频下载器
2020/11/17 Python
使用CSS变量实现炫酷惊人的悬浮效果
2019/04/26 HTML / CSS
澳大利亚最好的在线时尚精品店:Princess Polly
2018/01/03 全球购物
HTC VIVE美国官网:VR虚拟现实眼镜
2018/02/13 全球购物
关于幼儿的自我评价
2013/12/18 职场文书
销售总监岗位职责
2014/01/04 职场文书
农村婚礼证婚词
2014/01/10 职场文书
幼儿园安全生产月活动总结
2014/07/05 职场文书
幼儿园六一儿童节活动总结
2015/02/10 职场文书
看雷锋电影观后感
2015/06/10 职场文书
win10如何更改appdata文件夹的默认位置?
2022/07/15 数码科技
css弧边选项卡的项目实践
2023/05/07 HTML / CSS