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 相关文章推荐
CSS伪类与CSS伪元素的区别及由来具体说明
Dec 07 HTML / CSS
纯css3显示隐藏一个div特效的具体实现
Feb 10 HTML / CSS
CSS3按钮鼠标悬浮实现光圈效果源码
Sep 11 HTML / CSS
使用 css3 实现圆形进度条的示例
Jul 05 HTML / CSS
CSS3 实现穿梭星空动画
Nov 13 HTML / CSS
CSS3中的弹性布局em运用入门详解 1em等于多少像素
Feb 08 HTML / CSS
HTML5 本地存储之如果没有数据库究竟会怎样
Apr 25 HTML / CSS
HTML5进度条特效
Dec 18 HTML / CSS
极简的HTML5模版
Jul 09 HTML / CSS
关于canvas.toDataURL 在iOS运行失败的问题解决
Sep 16 HTML / CSS
CSS Transition通过改变Height实现展开收起元素
Aug 07 HTML / CSS
VW、VH适配移动端的解决方案与常见问题
May 21 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计算2个日期的差值函数分享
2015/02/02 PHP
php实现的中秋博饼游戏之绘制骰子图案功能示例
2017/11/06 PHP
redis+php实现微博(一)注册与登录功能详解
2019/09/23 PHP
javascript 计算两个整数的百分比值
2009/12/26 Javascript
js Function类型
2011/12/04 Javascript
一个简单的JS鼠标悬停特效具体方法
2013/06/17 Javascript
javascript删除option选项的多种方法总结
2013/11/22 Javascript
文本域中换行符的替换示例
2014/03/04 Javascript
jQuery中$.each使用详解
2015/01/29 Javascript
纯javascript响应式树形菜单效果
2015/11/10 Javascript
window.onload绑定多个事件的两种解决方案
2016/05/15 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
2016/06/20 Javascript
分享19个JavaScript 有用的简写写法
2017/07/07 Javascript
react native仿微信PopupWindow效果的实例代码
2017/08/07 Javascript
详解如何在angular2中获取节点
2017/11/23 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
2019/03/06 Javascript
在vue-cli 3中给stylus、sass样式传入共享的全局变量
2019/08/12 Javascript
Layui 解决表格异步调用后台分页的问题
2019/10/26 Javascript
Vue v-for循环之@click点击事件获取元素示例
2019/11/09 Javascript
d3.js实现图形拖拽
2019/12/19 Javascript
Python 转义字符详细介绍
2017/03/21 Python
Python科学画图代码分享
2017/11/29 Python
对Python中gensim库word2vec的使用详解
2018/05/08 Python
在PyTorch中使用标签平滑正则化的问题
2020/04/03 Python
Python可以实现栈的结构吗
2020/05/27 Python
PyTorch之nn.ReLU与F.ReLU的区别介绍
2020/06/27 Python
使用sublime text3搭建Python编辑环境的实现
2021/01/12 Python
澳大利亚旅游网站:Lastminute
2017/08/07 全球购物
主题酒店策划书
2014/01/28 职场文书
励志演讲稿800字
2014/08/21 职场文书
2014年高中教师工作总结
2014/12/19 职场文书
医院财务人员岗位职责
2015/04/14 职场文书
如何写一份成功的商业计划书
2019/06/25 职场文书
利用Python判断你的密码难度等级
2021/06/02 Python
浅谈PostgreSQL表分区的三种方式
2021/06/29 PostgreSQL
DIV CSS实现网页背景半透明效果
2021/12/06 HTML / CSS