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
纯CSS3实现鼠标悬停提示气泡效果
Feb 28 HTML / CSS
基于CSS3实现的黑色个性导航菜单效果
Sep 14 HTML / CSS
使用HTML5 Canvas API中的clip()方法裁剪区域图像
Mar 25 HTML / CSS
HTML5实现Notification API桌面通知功能
Mar 02 HTML / CSS
canvas实现有递增动画的环形进度条的实现方法
Jul 10 HTML / CSS
canvas绘制文本内容自动换行的实现代码
Jan 14 HTML / CSS
免费获得微软MCSD证书赶快行动吧!
Nov 13 HTML / CSS
html5 video标签屏蔽右键视频另存为的js代码
Nov 12 HTML / CSS
H5 meta小结(前端必看篇)
Aug 24 HTML / CSS
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
Sep 19 HTML / CSS
html5实现输入框fixed定位在屏幕最底部兼容性
Jul 03 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
function.inc.php超越php
2006/12/09 PHP
php与mysql建立连接并执行SQL语句的代码
2011/07/04 PHP
QQ登录 PHP OAuth示例代码
2011/07/20 PHP
twig模板获取全局变量的方法
2016/02/05 PHP
php 从指定数字中获取随机组合的简单方法(推荐)
2017/04/05 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
获取JavaScript用户自定义类的类名称的代码
2007/03/08 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
2012/10/12 Javascript
使用jQuery动态加载js脚本文件的方法
2014/04/03 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
2015/07/18 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
2016/12/16 Javascript
DWR3 访问WEB元素的两种方法实例详解
2017/01/03 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
2017/01/06 Javascript
基于JS实现翻书效果的页面切换样式
2017/02/16 Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
2017/05/02 Javascript
深入理解Vue transition源码分析
2017/07/30 Javascript
vue操作动画的记录animate.css实例代码
2019/04/26 Javascript
JS数组方法slice()用法实例分析
2020/01/18 Javascript
vue实现自定义多选按钮
2020/07/16 Javascript
[01:54]TI4西雅图DOTA2选手欢迎晚宴 现场报道
2014/07/08 DOTA
Python3 加密(hashlib和hmac)模块的实现
2017/11/23 Python
简单谈谈Python的pycurl模块
2018/04/07 Python
对Python通过pypyodbc访问Access数据库的方法详解
2018/10/27 Python
详解Python安装tesserocr遇到的各种问题及解决办法
2019/03/07 Python
基于django ManyToMany 使用的注意事项详解
2019/08/09 Python
pandas和spark dataframe互相转换实例详解
2020/02/18 Python
解决Keras的自定义lambda层去reshape张量时model保存出错问题
2020/07/01 Python
天猫超市:阿里巴巴打造的网上超市
2016/11/02 全球购物
新西兰演唱会和体育门票网站:Ticketmaster新西兰
2017/10/07 全球购物
大学生职业生涯规划范文
2013/12/31 职场文书
违纪检讨书2000字
2014/02/08 职场文书
有关环保的标语
2014/06/13 职场文书
Python re.sub 反向引用的实现
2021/07/07 Python
python中使用 unittest.TestCase单元测试的用例详解
2021/08/30 Python
Python中字符串对象语法分享
2022/02/24 Python
Android开发 使用文件储存的方式保存QQ密码
2022/04/24 Java/Android