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

所属分类: 网页制作 / html5 阅读数: 802
收藏 0 赞 0 分享
打开一个网页,加载完后,如果突然断网了,那么你刷新后那页面就没了。
有没有想过,刷新后页面还是刚刚才页面,在新窗口中再打开一个页面,输入相同的网址,在断网的状态下打开还是原来那个页面。。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打开后,找到了缓存文件的具体信息:
读者有兴趣可以自己去尝试一下,看会不会有新发现。
更多精彩内容其他人还在看

HTML5 Canvas锯齿图代码实例

这篇文章主要介绍了HTML5 Canvas锯齿图代码实例,需要的朋友可以参考下
收藏 0 赞 0 分享

html5图片上传预览示例分享

这篇文章主要介绍了html5图片上传预览示例,需要的朋友可以参考下
收藏 0 赞 0 分享

html5的canvas元素使用方法介绍(画矩形、画折线、圆形)

HTML5的canvas元素使用JavaScript在网页上绘制图像。画布是一个矩形区域,您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
收藏 0 赞 0 分享

使用html5制作loading图的示例

这篇文章主要介绍了使用html5制作loading图的示例,需要的朋友可以参考下
收藏 0 赞 0 分享

html5读取本地文件示例代码

这篇文章主要介绍了html5读取本地文件的具体实现,html结构样式、Css样式及js代码如下,需要的朋友可以看看哦
收藏 0 赞 0 分享

html5菜单折纸效果

这篇文章主要介绍了html5菜单折纸效果,类似猎豹浏览器安装时的用户须知效果,需要的朋友可以参考下
收藏 0 赞 0 分享

HTML5添加鼠标悬浮音响效果不使用FLASH

使用HTML5+jQuery添加鼠标悬浮音响效果,兼容Firefox 3.5+, Chrome 3+等等,使用html5的audio元素,随机播放一个mp3音效,需要的朋友可以参考下
收藏 0 赞 0 分享

HTML5中的Scoped属性使用实例

HTML5的变革给我们带来了大量非常有用的新属性,比如placeholder, download, hidden,等等。每一种新属性都给我们带来了对页面元素新的控制方法和控制效力
收藏 0 赞 0 分享

HTML5的hidden属性兼容老浏览器的方法

HTML5给我们带来了很多非常简单但却非常强大的HTML属性:placeholder, download, and autofocus,等等
收藏 0 赞 0 分享

html5基础标签(html5视频标签 html5新标签用法)

html5基础,包括html5视频标签和html5新标签等标签用法,大家参考使用吧
收藏 0 赞 0 分享
查看更多