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+DIV实现漂亮的动画彩色标签
Jun 16 HTML / CSS
CSS3实现DIV圆角效果完整代码
Oct 10 HTML / CSS
css3中检验表单的required,focus,valid和invalid样式
Feb 21 HTML / CSS
HTML5 用动画的表现形式装载图像
Mar 08 HTML / CSS
HTML5的结构和语义(2):结构
Oct 17 HTML / CSS
基于IE10/HTML5 开发
Apr 22 HTML / CSS
常用的HTML5列表标签
Jun 20 HTML / CSS
html5超简单的localStorage实现记住密码的功能实现
Sep 07 HTML / CSS
HTML5添加禁止缩放功能
Nov 03 HTML / CSS
h5使用canvas画布实现手势解锁
Jan 04 HTML / CSS
html5视频媒体标签video的使用方法及完整参数说明详解
Sep 27 HTML / CSS
CSS3实现的3D隧道效果
Apr 27 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通过COM使用ADODB的简单例子
2006/12/31 PHP
php cURL和Rolling cURL并发方式比较
2013/10/30 PHP
PHP生成静态HTML文档实现代码
2016/06/23 PHP
php微信公众账号开发之前五个坑(一)
2016/09/18 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
Laravel框架Blade模板简介及模板继承用法分析
2019/12/03 PHP
JS 文字符串转换unicode编码函数
2009/05/30 Javascript
Javascript 类与静态类的实现(续)
2010/04/02 Javascript
javascript dom代码应用 简单的相册[firefox only]
2010/06/12 Javascript
javascript 3d 逐侦产品展示(核心精简)
2014/03/26 Javascript
javascript随机之洗牌算法深入分析
2014/06/07 Javascript
Javascript中arguments和arguments.callee的区别浅析
2015/04/24 Javascript
JQuery实现的图文自动轮播效果插件
2015/06/19 Javascript
三种AngularJS中获取数据源的方式
2016/02/02 Javascript
jQuery检查元素存在性(推荐)
2016/09/17 Javascript
js时间控件只显示年月
2017/01/08 Javascript
微信小程序--组件(swiper)详细介绍
2017/06/13 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
2017/08/08 Javascript
Thinkphp5微信小程序获取用户信息接口的实例详解
2017/09/26 Javascript
iview Upload组件多个文件上传的示例代码
2018/09/30 Javascript
JavaScript中concat复制数组方法浅析
2019/01/20 Javascript
刷新页面后让控制台的js代码继续执行
2019/09/20 Javascript
Vue-cli项目部署到Nginx服务器的方法
2019/11/01 Javascript
浅谈webpack和webpack-cli模块源码分析
2020/01/19 Javascript
[01:10:58]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
Django查询数据库的性能优化示例代码
2017/09/24 Python
基于python中的TCP及UDP(详解)
2017/11/06 Python
Python+selenium点击网页上指定坐标的实例
2019/07/05 Python
django-rest-swagger对API接口注释的方法
2019/08/29 Python
python实现飞机大战游戏(pygame版)
2020/10/26 Python
python 中的paramiko模块简介及安装过程
2020/02/29 Python
html5开发三八女王节表白神器
2018/03/07 HTML / CSS
小学生竞选班干部演讲稿(5篇)
2014/09/12 职场文书
计生个人工作总结
2015/02/28 职场文书
党员评议自我评价
2015/03/03 职场文书
python 常用的异步框架汇总整理
2021/06/18 Python