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实现带动画效果导航菜单无需js
Sep 27 HTML / CSS
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
Jul 21 HTML / CSS
CSS3的first-child选择器实战攻略
Apr 28 HTML / CSS
CSS3使用transition属性实现过渡效果
Apr 18 HTML / CSS
CSS3标注引用的出处和来源的方法
Feb 25 HTML / CSS
HTML5地理定位与第三方工具百度地图的应用
Nov 17 HTML / CSS
基于Html5实现的react拖拽排序组件示例
Aug 13 HTML / CSS
HTML5 video视频字幕的使用和制作方法
May 03 HTML / CSS
HTML5 Canvas draw方法制作动画效果示例
Jul 11 HTML / CSS
HTML5 新标签全部总汇(推荐)
Jun 13 HTML / CSS
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
Apr 10 HTML / CSS
详解CSS伪元素的妙用单标签之美
May 25 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
浅析ThinkPHP的模板输出功能
2014/07/01 PHP
创建无限极分类树型结构的简单方法
2017/06/20 PHP
Javascript 判断 object 的特定类转载
2007/02/01 Javascript
js 图片缩放(按比例)控制代码
2009/05/27 Javascript
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
2010/05/07 Javascript
用Jquery选择器计算table中的某一列某一行的合计
2014/08/13 Javascript
Jquery修改页面标题title其它JS失效的解决方法
2014/10/31 Javascript
编写高质量JavaScript代码的基本要点
2016/03/02 Javascript
JavaScript与java语言有什么不同
2016/09/22 Javascript
关于js函数解释(包括内嵌,对象等)
2016/11/20 Javascript
微信小程序 swiper制作tab切换实现附源码
2017/01/21 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
2017/03/23 Javascript
angular.js4使用 RxJS 处理多个 Http 请求
2017/09/23 Javascript
JavaScript递归函数定义与用法实例分析
2019/01/24 Javascript
详解keep-alive + vuex 让缓存的页面灵活起来
2019/04/19 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
2019/09/02 Javascript
jQuery实现飞机大战小游戏
2020/07/05 jQuery
python实现的简单文本类游戏实例
2015/04/28 Python
Python正则表达式常用函数总结
2017/06/24 Python
神经网络理论基础及Python实现详解
2017/12/15 Python
tensorflow训练中出现nan问题的解决
2018/02/10 Python
Python内置模块hashlib、hmac与uuid用法分析
2018/02/12 Python
Django Admin 上传文件到七牛云的示例代码
2020/06/20 Python
Pycharm 跳转回之前所在页面的操作
2021/02/05 Python
requests在python中发送请求的实例讲解
2021/02/17 Python
socket.io 和canvas 实现的共享画板功能
2019/05/22 HTML / CSS
丝芙兰新加坡官网:Sephora新加坡
2018/12/04 全球购物
构造器Constructor是否可被override?
2013/08/06 面试题
一套比较完整的软件测试人员面试题
2012/05/13 面试题
早餐连锁店计划书
2014/01/08 职场文书
优秀班组长事迹
2014/05/31 职场文书
教师批评与自我批评(群众路线)
2014/10/15 职场文书
社区法制宣传日活动总结
2015/05/05 职场文书
单位证明范文
2015/06/18 职场文书
Python趣味实战之手把手教你实现举牌小人生成器
2021/06/07 Python
Python内置类型集合set和frozenset的使用详解
2022/04/26 Python