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 border旋转时的动画应用
Jan 22 HTML / CSS
CSS3+Sprite实现僵尸行走动画特效源码
Jan 27 HTML / CSS
CSS3近阶段篇之酷炫的3D旋转透视
Apr 28 HTML / CSS
CSS3实现缺角矩形,折角矩形以及缺角边框
Dec 20 HTML / CSS
IE9对HTML5中部分属性不支持的原因分析
Oct 15 HTML / CSS
HTML5实现可缩放时钟代码
Aug 28 HTML / CSS
css3实现背景图片颜色修改的多种方式
Apr 13 HTML / CSS
深入理解margin塌陷和margin合并的解决方案
Jun 26 HTML / CSS
CSS3 Tab动画实例之背景切换动态效果
Aug 23 HTML / CSS
深入理解CSS 中 transform matrix矩阵变换问题
Aug 30 HTML / CSS
能用CSS实现的就不要麻烦JavaScript了
Oct 05 HTML / CSS
分享CSS盒子模型隐藏的几种方式
Feb 28 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通过ajax实现双击table修改内容
2014/04/28 PHP
PHP连接和操作MySQL数据库基础教程
2014/09/29 PHP
实例详解PHP中html word 互转的方法
2016/01/28 PHP
浅谈PHP错误类型及屏蔽方法
2017/05/27 PHP
jQuery使用之设置元素样式用法实例
2015/01/19 Javascript
分享javascript、jquery实用代码段
2016/10/20 Javascript
JSON与JS对象的区别与对比
2017/03/01 Javascript
微信小程序之数据双向绑定与数据操作
2017/05/12 Javascript
基于require.js的使用(实例讲解)
2017/09/07 Javascript
详解node单线程实现高并发原理与node异步I/O
2017/09/21 Javascript
Bootstrap 3多级下拉菜单实例
2017/11/23 Javascript
vue.js 嵌套循环、if判断、动态删除的实例
2018/03/07 Javascript
使用Vue自定义指令实现Select组件
2018/05/24 Javascript
js实现九宫格布局效果
2020/05/28 Javascript
VUE使用axios调用后台API接口的方法
2020/08/03 Javascript
[52:31]VP vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python通过colorama模块在控制台输出彩色文字的方法
2015/03/19 Python
python转换字符串为摩尔斯电码的方法
2015/07/06 Python
用virtualenv建立多个Python独立虚拟开发环境
2017/07/06 Python
PyCharm代码回滚,恢复历史版本的解决方法
2018/10/22 Python
Python使用os.listdir()和os.walk()获取文件路径与文件下所有目录的方法
2019/04/01 Python
python 使用turtule绘制递归图形(螺旋、二叉树、谢尔宾斯基三角形)
2019/05/30 Python
python的set处理二维数组转一维数组的方法示例
2019/05/31 Python
python使用paramiko模块通过ssh2协议对交换机进行配置的方法
2019/07/25 Python
python 提取文件指定列的方法示例
2019/08/07 Python
python获取指定日期范围内的每一天,每个月,每季度的方法
2019/08/08 Python
OpenCV里的imshow()和Matplotlib.pyplot的imshow()的实现
2019/11/25 Python
使用css3绘制出各种几何图形
2016/08/17 HTML / CSS
CSS3打造百度贴吧的3D翻牌效果示例
2017/01/04 HTML / CSS
加拿大国民体育购物网站:National Sports
2018/11/04 全球购物
乡镇庆八一活动方案
2014/02/02 职场文书
协议书与合同的区别
2014/04/18 职场文书
团拜会策划方案
2014/06/07 职场文书
2015年七夕爱情寄语
2015/03/24 职场文书
python自然语言处理之字典树知识总结
2021/04/25 Python
详解Vue的options
2021/05/15 Vue.js