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轻松实现圆角效果
Nov 09 HTML / CSS
button在IE6/7下的黑边去除方案
Dec 24 HTML / CSS
css3弹性盒模型实例介绍
May 27 HTML / CSS
CSS Grid布局教程之什么是网格布局
Dec 30 HTML / CSS
一款基于css3的列表toggle特效实例教程
Jan 04 HTML / CSS
css3 border旋转时的动画应用
Jan 22 HTML / CSS
CSS3实现多样的边框效果
May 04 HTML / CSS
CSS3实现淘宝留白的方法
Jun 05 HTML / CSS
HTML5 canvas基本绘图之绘制矩形
Jun 27 HTML / CSS
程序设计HTML5 Canvas API
Apr 08 HTML / CSS
基于IE10/HTML5 开发
Apr 22 HTML / CSS
HTML5中的autofocus(自动聚焦)属性介绍
Apr 23 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
11个PHP 分页脚本推荐
2011/08/15 PHP
Thinkphp无限级分类代码
2015/11/11 PHP
PHP的中使用非缓冲模式查询数据库的方法
2017/02/05 PHP
javascript 禁止复制网页
2009/06/11 Javascript
基于jquery的跨域调用文件
2010/11/19 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
2013/11/19 Javascript
javascript实现文本域写入字符时限定字数
2014/02/12 Javascript
JavaScript避免代码的重复执行经验技巧分享
2014/04/17 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
2014/10/17 Javascript
Web表单提交之disabled问题js解决方法
2015/01/13 Javascript
使用Sticker.js实现贴纸效果
2015/01/28 Javascript
jquery实现倒计时效果
2015/12/14 Javascript
浅谈jquery的map()和each()方法
2016/06/12 Javascript
基于jQuery实现中英文切换导航条效果
2016/09/18 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
2016/10/27 Javascript
JS 终止执行的实现方法
2016/11/24 Javascript
js实现图片左右滚动效果
2017/02/27 Javascript
Node.js中.pfx后缀文件的处理方法
2017/03/10 Javascript
js脚本编写简单刷票投票系统
2017/06/27 Javascript
在Vue项目中使用d3.js的实例代码
2018/05/01 Javascript
vue中datepicker的使用教程实例代码详解
2019/07/08 Javascript
javascript面向对象程序设计实践常用知识点总结
2019/07/29 Javascript
python实现分析apache和nginx日志文件并输出访客ip列表的方法
2015/04/04 Python
Django框架的中的setting.py文件说明详解
2018/10/15 Python
利用keras加载训练好的.H5文件,并实现预测图片
2020/01/24 Python
如何在python开发工具PyCharm中搭建QtPy环境(教程详解)
2020/02/04 Python
医科大学生的自我评价
2013/12/04 职场文书
《学会待客》教学反思
2014/02/22 职场文书
2016自主招生校长推荐信范文
2015/03/23 职场文书
房地产财务经理岗位职责
2015/04/08 职场文书
消防安全主题班会
2015/08/12 职场文书
2016新党章学习心得体会
2016/01/15 职场文书
读《推着妈妈去旅行》有感1500字
2019/10/15 职场文书
Python网络编程之ZeroMQ知识总结
2021/04/25 Python
详细聊聊关于Mysql联合查询的那些事儿
2021/10/24 MySQL
Python TypeError: ‘float‘ object is not subscriptable错误解决
2022/12/24 Python