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实现3D旋转书本效果
Mar 21 HTML / CSS
CSS3制作文字半透明倒影效果的两种实现方式
Aug 08 HTML / CSS
可自定义箭头样式的CSS3气泡提示框
Mar 16 HTML / CSS
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
Dec 30 HTML / CSS
纯css3实现宠物小鸡实例代码
Oct 08 HTML / CSS
如何用border-image实现文字气泡边框的示例代码
Jan 21 HTML / CSS
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
Dec 13 HTML / CSS
html5中的input新属性range使用记录
Sep 05 HTML / CSS
HTML5新增属性data-*和js/jquery之间的交互及注意事项
Aug 08 HTML / CSS
HTML5实现移动端弹幕动画效果
Aug 01 HTML / CSS
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
Apr 08 HTML / CSS
关于CSS浮动与取消浮动的问题
Jun 28 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
Smarty局部缓存的几种方法简介
2014/06/17 PHP
Mootools 1.2教程 排序类和方法简介
2009/09/15 Javascript
JS Pro-深入面向对象的程序设计之继承的详解
2013/05/07 Javascript
ExtJS4中使用mixins实现多继承示例
2013/12/03 Javascript
javascript eval(func())使用示例
2013/12/05 Javascript
原生javascript实现图片按钮切换
2015/01/12 Javascript
ztree获取当前选中节点子节点id集合的方法
2015/02/12 Javascript
jquery插件splitScren实现页面分屏切换模板特效
2015/06/16 Javascript
win7下安装配置node.js+express开发环境
2015/12/06 Javascript
javascript跑马灯抽奖实例讲解
2020/04/17 Javascript
深入浅析knockout源码分析之订阅
2016/07/12 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
2016/12/06 Javascript
Nodejs多站点切换Htpps协议详解及简单实例
2017/02/23 NodeJs
原生JS实现的碰撞检测功能示例
2018/05/18 Javascript
jquery 动态遍历select 赋值的实例
2018/09/12 jQuery
vue-week-picker实现支持按周切换的日历
2019/06/26 Javascript
vue 解决路由只变化参数页面组件不更新问题
2019/11/05 Javascript
Javascript模拟实现new原理解析
2020/03/03 Javascript
uniapp实现可滑动选项卡
2020/10/21 Javascript
[02:43]DOTA2英雄基础教程 半人马战行者
2014/01/13 DOTA
python 计算两个日期相差多少个月实例代码
2017/05/24 Python
Python实现线程状态监测简单示例
2018/03/28 Python
python中利用zfill方法自动给数字前面补0
2018/04/10 Python
pytorch + visdom 处理简单分类问题的示例
2018/06/04 Python
Python中itertools的用法详解
2020/02/07 Python
Python greenlet和gevent使用代码示例解析
2020/04/01 Python
Pytorch生成随机数Tensor的方法汇总
2020/09/09 Python
Parts Express:音频、视频和扬声器的第一来源
2017/04/25 全球购物
iPad和Surface Pro蓝牙键盘:Brydge
2018/11/10 全球购物
俄罗斯最大的在线珠宝大卖场:Nebo
2019/12/08 全球购物
英语自荐信常用语句
2013/12/13 职场文书
正风肃纪剖析材料
2014/09/30 职场文书
2015年打非治违工作总结
2015/04/02 职场文书
革命电影观后感
2015/06/18 职场文书
2016年“9.22”世界无车日活动小结
2016/04/05 职场文书
td 内容自动换行 table表格td设置宽度后文字太多自动换行
2022/12/24 HTML / CSS