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的flexbox实现水平垂直居中与三列等高布局
Sep 12 HTML / CSS
你应该知道的30个css选择器
Mar 19 HTML / CSS
CSS3 animation实现逐帧动画效果
Jun 02 HTML / CSS
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
Jan 17 HTML / CSS
利用html5 file api读取本地文件示例(如图片、PDF等)
Mar 07 HTML / CSS
HTML5实现的震撼3D焦点图动画的示例代码
Sep 26 HTML / CSS
html5构建触屏网站之网站尺寸探讨
Jan 07 HTML / CSS
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
Jan 31 HTML / CSS
HTML5 visibilityState属性详细介绍和使用实例
May 03 HTML / CSS
HTML 5 input placeholder 属性如何完美兼任ie
May 12 HTML / CSS
HTML5如何使用SVG的方法示例
Jan 11 HTML / CSS
CSS filter 有什么神奇用途
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
PHP header()函数常用方法总结
2014/04/11 PHP
从零开始学YII2框架(五)快速生成代码工具 Gii 的使用
2014/08/20 PHP
php 二维数组时间排序实现代码
2016/11/19 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
PHP基于phpqrcode类生成二维码的方法详解
2018/03/14 PHP
关于laravel模板中生成URL的几种模式总结
2019/10/18 PHP
JavaScript delete操作符应用实例
2009/01/13 Javascript
jQuery 版本的文本输入框检查器Input Check
2009/07/09 Javascript
js 可拖动列表实现代码
2011/12/13 Javascript
javascript 构造函数强制调用经验总结
2012/12/02 Javascript
window.addEventListener来解决让一个js事件执行多个函数
2012/12/26 Javascript
js将字符串转成正则表达式的实现方法
2013/11/13 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
2015/08/17 Javascript
js实现不提交表单获取单选按钮值的方法
2015/08/21 Javascript
JS深度拷贝Object Array实例分析
2016/03/31 Javascript
js判断输入框不能为空格或null值的实现方法
2018/03/02 Javascript
React Native中Mobx的使用方法详解
2018/12/04 Javascript
微信小程序 setData 对 data数据影响问题
2019/04/18 Javascript
vue cli 3.0 搭建项目的图文教程
2019/05/17 Javascript
jQuery中使用validate插件校验表单功能
2019/05/24 jQuery
JavaScript享元模式原理与用法实例详解
2020/03/09 Javascript
js实现动态时钟
2020/03/12 Javascript
python根据出生年份简单计算生肖的方法
2015/03/27 Python
python 实现将list转成字符串,中间用空格隔开
2019/12/25 Python
详解pycharm连接不上mysql数据库的解决办法
2020/01/10 Python
面向对象编程的优势是什么
2015/12/17 面试题
酒店led欢迎词
2014/01/09 职场文书
通信研究生自荐信
2014/02/01 职场文书
学雷锋活动倡议书
2014/08/30 职场文书
升学宴演讲稿
2014/09/01 职场文书
离职证明范本(5篇)
2014/09/19 职场文书
党的群众路线教育实践活动学习笔记范文
2014/11/06 职场文书
感谢信模板大全
2015/01/23 职场文书
出纳试用期自我评价
2015/03/10 职场文书
用基于python的appium爬取b站直播消费记录
2021/04/17 Python
pytorch Dropout过拟合的操作
2021/05/27 Python