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实现类似翻书效果的过渡动画的示例代码
Sep 06 HTML / CSS
CSS3 Backgrounds属性相关介绍
May 11 HTML / CSS
利用css3实现的简单的鼠标悬停按钮
Nov 04 HTML / CSS
html5指南-7.geolocation结合google maps开发一个小的应用
Jan 07 HTML / CSS
HTML5 Video/Audio播放本地文件示例介绍
Nov 18 HTML / CSS
html5通过canvas实现刮刮卡效果示例分享
Jan 27 HTML / CSS
HTML5本地数据库基础操作详解
Apr 26 HTML / CSS
通过HTML5规范搞定i、em、b、strong元素的区别
Mar 04 HTML / CSS
HTML5中外部浏览器唤起微信分享
Jan 02 HTML / CSS
h5移动端调用支付宝、微信支付的实现
Jun 08 HTML / CSS
浅析图片上传及canvas压缩的流程
Jun 10 HTML / CSS
html5实现输入框fixed定位在屏幕最底部兼容性
Jul 03 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
php公用函数列表[正则]
2007/02/22 PHP
创建配置文件 用PHP写出自己的BLOG系统 2
2010/04/12 PHP
php checkbox复选框值的获取与checkbox默认值输出方法
2010/05/15 PHP
解析thinkphp基本配置 convention.php
2013/06/18 PHP
解析linux下安装memcacheq(mcq)全过程笔记
2013/06/27 PHP
php将HTML表格每行每列转为数组实现采集表格数据的方法
2015/04/03 PHP
php lcg_value与mt_rand生成0~1随机小数的效果对比分析
2017/04/05 PHP
PHP利用DWZ.CN服务生成短网址
2019/08/11 PHP
php-fpm超时时间设置request_terminate_timeout资源问题分析
2019/09/27 PHP
php实现对文件压缩简单的方法
2019/09/29 PHP
Javascript typeof 用法
2008/12/28 Javascript
js验证电话号码与手机支持+86的正则表达式
2014/01/23 Javascript
JavaScript按位运算符的应用简析
2014/02/04 Javascript
JS调试必备的5个debug技巧
2014/03/07 Javascript
nodejs实现的一个简单聊天室功能分享
2014/12/06 NodeJs
node.js中的http.get方法使用说明
2014/12/14 Javascript
基于javascript的COOkie的操作实现只能点一次
2014/12/26 Javascript
jQuery中的pushStack实现原理和应用实例
2015/02/03 Javascript
javascript中in运算符用法分析
2015/04/28 Javascript
jQuery窗口拖动功能的实现代码
2017/02/04 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
2017/06/15 Javascript
详解webpack进阶之loader篇
2017/08/23 Javascript
微信小程序中转义字符的处理方法
2019/03/28 Javascript
Python-基础-入门 简介
2014/08/09 Python
详解Python的单元测试
2015/04/28 Python
在Python中,不用while和for循环遍历列表的实例
2019/02/20 Python
python使用threading.Condition交替打印两个字符
2019/05/07 Python
感知器基础原理及python实现过程详解
2019/09/30 Python
基于HTML5 WebGL的3D机房的示例
2018/03/16 HTML / CSS
美国机场停车位预订:About Airport Parking
2018/03/26 全球购物
性能服装:HYLETE
2018/08/14 全球购物
水利公司纪检监察自我鉴定
2014/02/25 职场文书
公司员工培训管理制度
2015/08/04 职场文书
2015年六年级班主任工作总结
2015/10/15 职场文书
2016年大学生暑假爱心支教活动策划书
2015/11/26 职场文书
浅谈Redis的keys命令到底有多慢
2021/10/05 Redis