html5 offlline 缓存使用示例


Posted in HTML / CSS onJune 24, 2013

如果想使用该api,必须保证服务器端配置相应的mime类型。

拿tomcat为例,在打开Tomcat 6.0\conf\web.xml文件,在文件的最后面添加如下内容

复制代码
代码如下:

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

尤其注意,extension的value是manifest,所以以后配置缓存文件的后缀必须跟他一样。

使用缓存是必须如下格式

复制代码
代码如下:

<!DOCTYPE html>
<html manifest="/cache.manifest">
<body>
...
</body>
</html>

cache.mainfest是在服务器端配置的文件

格式如下

复制代码
代码如下:

CACHE MANIFEST
index.html
time.js
time.css
#fallback主要是用来离线的时候替换文件,
# /pay/ ofline.html pay下面的所有请求在离线的是都会转发给 ofline.htm
FALLBACK:
server-time.js fallback-server-time.js
NETWORK:
*
# version 9

其中version 为版本标签,当版本发生改变的时候,客户端会自动更新缓存。
HTML / CSS 相关文章推荐
CSS3中动画属性transform、transition和animation属性的区别
Sep 25 HTML / CSS
纯CSS3实现Material Design效果
Mar 09 HTML / CSS
CSS3的transition和animation的用法实例介绍
Aug 20 HTML / CSS
CSS3中的clip-path使用攻略
Aug 03 HTML / CSS
CSS3制作炫酷的自定义发光文字
Mar 28 HTML / CSS
纯CSS3实现扇形动画菜单(简化版)实例源码
Jan 17 HTML / CSS
CSS3实现淘宝留白的方法
Jun 05 HTML / CSS
HTML5的Geolocation地理位置定位API使用教程
May 12 HTML / CSS
HTML5使用DOM进行自定义控制示例代码
Jun 08 HTML / CSS
html5模拟平抛运动(模拟小球平抛运动过程)
Jul 25 HTML / CSS
跨域修改iframe页面内容详解
Oct 31 HTML / CSS
css弧边选项卡的项目实践
May 07 HTML / CSS
html5 worker 实例(二) 图片变换效果
Jun 24 #HTML / CSS
html5 worker 实例(一) 为什么测试不到效果
Jun 24 #HTML / CSS
HTML5的表单(绝对特别强大的功能)使用示例
Jun 20 #HTML / CSS
利用HTML5画出一个坦克的形状具体实现代码
Jun 20 #HTML / CSS
HTML5 Canvas——用路径描画线条实例介绍
Jun 09 #HTML / CSS
html5的画布canvas——画出简单的矩形、三角形实例代码
Jun 09 #HTML / CSS
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
Jun 09 #HTML / CSS
You might like
一条久听不愿放下的DIY森海MX500,三言两语话神奇
2021/03/02 无线电
逐步提升php框架的性能
2008/01/10 PHP
Apache实现Web Server负载均衡详解(不考虑Session版)
2013/07/05 PHP
PHP实现的自定义数组排序函数与排序类示例
2016/11/18 PHP
php数值转换时间及时间转换数值用法示例
2017/05/18 PHP
Laravel框架中队列和工作(Queues、Jobs)操作实例详解
2020/04/06 PHP
JavaScript中的prototype.bind()方法介绍
2014/04/04 Javascript
JS应用正则表达式转换大小写示例
2014/09/18 Javascript
node.js中的path.extname方法使用说明
2014/12/09 Javascript
js动态切换图片的方法
2015/01/20 Javascript
初步使用Node连接Mysql数据库
2016/03/03 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
2016/04/17 Javascript
jQuery的图片轮播插件PgwSlideshow使用详解
2016/08/11 Javascript
详解jQuery uploadify文件上传插件的使用方法
2016/12/16 Javascript
js获取浏览器和屏幕的各种宽度高度
2017/02/22 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
2017/04/11 Javascript
AngularJS路由删除#符号解决的办法
2017/09/28 Javascript
js实现菜单跳转效果
2020/12/11 Javascript
python 参数列表中的self 显式不等于冗余
2008/12/01 Python
Python中asyncore异步模块的用法及实现httpclient的实例
2016/06/28 Python
详解supervisor使用教程
2017/11/21 Python
python读取TXT每行,并存到LIST中的方法
2018/10/26 Python
keras模型保存为tensorflow的二进制模型方式
2020/05/25 Python
h5调用摄像头的实现方法
2016/06/01 HTML / CSS
乌克兰网上服装店:Bolf.ua
2018/10/30 全球购物
瑞士设计师家具和家居饰品网上商店:Bruno Wickart
2019/03/18 全球购物
汽车维修与检测专业应届生求职信
2013/11/12 职场文书
实习自我鉴定
2013/12/15 职场文书
奥巴马就职演讲稿
2014/05/15 职场文书
团队精神口号
2014/06/06 职场文书
管理标语大全
2014/06/24 职场文书
2014年高中生自我评价范文
2014/09/26 职场文书
2015高考寄语集锦
2015/02/27 职场文书
三傻大闹宝莱坞观后感
2015/06/03 职场文书
结婚典礼致辞
2015/07/28 职场文书
劳动模范获奖感言
2015/07/31 职场文书