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模块的目前的状况分析
Feb 24 HTML / CSS
一款纯css3实现的漂亮的404页面的实例教程
Nov 27 HTML / CSS
网页切图的CSS和布局经验与要点
Apr 09 HTML / CSS
CSS3 实现图形下落动画效果
Nov 13 HTML / CSS
html5 touch事件实现触屏页面上下滑动(一)
Mar 10 HTML / CSS
html5中如何将图片的绝对路径转换成文件对象
Jan 11 HTML / CSS
HTML5 Canvas锯齿图代码实例
Apr 10 HTML / CSS
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
Jul 12 HTML / CSS
HTML5实现签到 功能
Oct 09 HTML / CSS
HTML5来实现本地文件读取和写入的实现方法
May 25 HTML / CSS
CSS 实现Chrome标签栏的技巧
Aug 04 HTML / CSS
css3带你实现3D转换效果
Feb 24 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
smarty+adodb+部分自定义类的php开发模式
2006/12/31 PHP
php中有关字符串的4个函数substr、strrchr、strstr、ereg介绍和使用例子
2014/04/24 PHP
php编程每天必学之验证码
2016/03/03 PHP
JavaScript DOM 学习第九章 选取范围的介绍
2010/02/19 Javascript
深入理解jQuery中live与bind方法的区别
2013/12/18 Javascript
js 针对html DOM元素操作等经验累积
2014/03/11 Javascript
批量修改标签css样式以input标签为例
2014/07/31 Javascript
浅析js预加载/延迟加载
2014/09/25 Javascript
node.js中的fs.writeFileSync方法使用说明
2014/12/14 Javascript
Js实现自定义右键行为
2015/03/26 Javascript
jQuery通过Ajax返回JSON数据
2015/04/28 Javascript
ECMA5数组的新增方法有哪些及forEach()模仿实现
2015/11/03 Javascript
javascript中错误使用var造成undefined
2016/03/31 Javascript
Javascript中字符串相关常用的使用方法总结
2017/03/13 Javascript
JS实现动态添加DOM节点和事件的方法示例
2017/04/28 Javascript
详解VUE 数组更新
2017/12/16 Javascript
详解Vue webapp项目通过HBulider打包原生APP
2018/06/29 Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
2019/02/02 Javascript
js打开word文档预览操作示例【不是下载】
2019/05/23 Javascript
node.JS事件机制与events事件模块的使用方法详解
2020/02/06 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
2020/04/26 Javascript
浅析python3字符串格式化format()函数的简单用法
2018/12/07 Python
Python构建图像分类识别器的方法
2019/01/12 Python
解决python写入带有中文的字符到文件错误的问题
2019/01/31 Python
解决Tensorflow sess.run导致的内存溢出问题
2020/02/05 Python
Python使用urllib模块对URL网址中的中文编码与解码实例详解
2020/02/18 Python
洲际酒店集团大中华区:IHG中国
2016/08/17 全球购物
意大利灯具购物网站:Lampade.it
2018/10/18 全球购物
元旦晚会邀请函
2014/01/27 职场文书
会计学自荐信
2014/06/03 职场文书
证劵公司反洗钱宣传活动总结
2015/05/08 职场文书
电影建国大业观后感
2015/06/01 职场文书
python - asyncio异步编程
2021/04/06 Python
Win7/8.1用户可以免费升级到Windows 11系统吗?
2021/11/21 数码科技
如何利用Python实现n*n螺旋矩阵
2022/01/18 Python
PostgreSQL聚合函数介绍以及分组和排序
2022/04/12 PostgreSQL