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实现一款模仿iphone样式的注册表单
Mar 20 HTML / CSS
如何利用CSS3制作3D效果文字具体实现样式
May 02 HTML / CSS
CSS3的一个简单导航栏实现
Aug 03 HTML / CSS
纯CSS3打造属于自己的“小黄人”
Mar 14 HTML / CSS
利用纯CSS3实现tab选项卡切换示例代码
Sep 21 HTML / CSS
详解基于 Canvas 手撸一个六边形能力图
Sep 02 HTML / CSS
HTML5新增元素如何兼容旧浏览器有哪些方法
May 09 HTML / CSS
Html5获取高德地图定位天气的方法
Dec 26 HTML / CSS
H5 video poster属性设置视频封面的方法
May 25 HTML / CSS
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
Aug 19 HTML / CSS
详解Html5项目适配系统深色模式方案总结
Apr 14 HTML / CSS
css3 文字断裂效果
Apr 22 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 缩略图实现函数代码
2011/06/23 PHP
php json_encode值中大括号与花括号区别
2013/09/30 PHP
thinkphp区间查询、统计查询与SQL直接查询实例分析
2014/11/24 PHP
PHP中的流(streams)浅析
2015/07/02 PHP
PHP图像裁剪缩略裁切类源码及使用方法
2016/01/07 PHP
php中实现字符串翻转的方法
2017/02/22 PHP
php array 转json及java 转换 json数据格式操作示例
2019/11/13 PHP
懒就要懒到底——鼠标自动点击(含时间判断)
2007/02/20 Javascript
js 字符串操作函数
2009/07/25 Javascript
javascript 类型判断代码分析
2010/03/28 Javascript
JQuery操作单选按钮以及复选按钮示例
2013/09/23 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
2013/12/19 Javascript
JS简单实现动画弹出层效果
2015/05/05 Javascript
JavaScript中创建对象的模式汇总
2016/04/19 Javascript
总结JavaScript设计模式编程中的享元模式使用
2016/05/21 Javascript
浅谈原型对象的常用开发模式
2017/07/22 Javascript
详解如何使用webpack+es6开发angular1.x
2017/08/16 Javascript
vue.js input框之间赋值方法
2018/08/24 Javascript
vue 使用post/get 下载导出文件操作
2020/08/07 Javascript
vue大型项目之分模块运行/打包的实现
2020/09/21 Javascript
vue中使用腾讯云Im的示例
2020/10/23 Javascript
Python基于pygame实现图片代替鼠标移动效果
2015/11/11 Python
python类的继承实例详解
2017/03/30 Python
Python 逐行分割大txt文件的方法
2017/10/10 Python
删除DataFrame中值全为NaN或者包含有NaN的列或行方法
2018/11/06 Python
python画双y轴图像的示例代码
2019/07/07 Python
python控制台实现tab补全和清屏的例子
2019/08/20 Python
Python实现随机生成任意数量车牌号
2020/01/21 Python
Python实现获取当前目录下文件名代码详解
2020/03/10 Python
Python使用socket_TCP实现小文件下载功能
2020/10/09 Python
Python批量修改xml的坐标值全部转为整数的实例代码
2020/11/26 Python
《富饶的西沙群岛》教学反思
2014/04/09 职场文书
《赠汪伦》教学反思
2014/04/12 职场文书
好的旅游活动方案
2014/08/19 职场文书
德生BCL3000抢先使用感受和评价
2022/04/07 无线电
使用python生成大量数据写入es数据库并查询操作(2)
2022/09/23 Python