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 相关文章推荐
详解CSS样式中的 !important * _ 符号
Mar 09 HTML / CSS
CSS3弹性伸缩布局之box布局
Jul 12 HTML / CSS
CSS3对图片照片进行边缘模糊处理的实现
Aug 08 HTML / CSS
CSS3 border-image详解、应用及jQuery插件
Aug 29 HTML / CSS
css3 条纹化和透明化表格Firefox下测试成功
Apr 15 HTML / CSS
Html5上传图片 移动端、PC端通用代码
Jun 08 HTML / CSS
canvas三角函数模拟水波效果的示例代码
Jul 03 HTML / CSS
HTML5的hidden属性兼容老浏览器的方法
Apr 23 HTML / CSS
浅谈html5 响应式布局
Dec 24 HTML / CSS
一文彻底解决HTML5页面中长按保存图片功能
Jun 10 HTML / CSS
Html5移动端适配IphoneX等机型的方法
Jun 25 HTML / CSS
HTML5自定义视频播放器源码
Jan 06 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
给初学者的30条PHP最佳实践(荒野无灯)
2011/08/02 PHP
php变量与JS变量实现不通过跳转直接交互的方法
2017/08/25 PHP
php nginx 实时输出的简单实现方法
2018/01/21 PHP
PHP实现二维数组中的查找算法小结
2018/06/09 PHP
静态的动态续篇之来点XML
2006/08/15 Javascript
给jQuery方法添加回调函数一款插件的应用
2013/01/21 Javascript
javascript中使用正则表达式清理table样式的代码
2020/04/01 Javascript
js动态获取子复选项并设计全选及提交的实现方法
2016/06/24 Javascript
轻松实现js选项卡切换效果
2016/09/24 Javascript
AngularJS实现星星等级评分功能
2016/09/24 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
2016/11/16 Javascript
第一次接触神奇的前端框架vue.js
2016/12/01 Javascript
深入理解Commonjs规范及Node模块实现
2017/05/17 Javascript
利用JavaScript实现栈的数据结构示例代码
2017/08/02 Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
2018/03/14 Javascript
vue 实现复制内容到粘贴板clipboard的方法
2018/03/17 Javascript
在layui中layer弹出层点击事件无效的解决方法
2019/09/05 Javascript
移动端手指操控左右滑动的菜单
2019/09/08 Javascript
nuxt 页面路由配置,主页轮播组件开发操作
2020/11/05 Javascript
Python3中多线程编程的队列运作示例
2015/04/16 Python
Java分治归并排序算法实例详解
2017/12/12 Python
python3+PyQt5实现柱状图
2018/04/24 Python
Python线程同步的实现代码
2018/10/03 Python
pycharm运行scrapy过程图解
2019/11/22 Python
Python run()函数和start()函数的比较和差别介绍
2020/05/03 Python
英国著名的药妆网站:Escentual
2016/07/29 全球购物
美国零售商店:Blue&Cream
2017/04/07 全球购物
.net笔试题
2014/03/03 面试题
开办加工厂创业计划书
2014/01/03 职场文书
前处理组长岗位职责
2014/03/01 职场文书
《翻越远方的大山》教学反思
2014/04/13 职场文书
英语教育专业自荐信
2014/05/29 职场文书
会计学自荐信
2014/06/03 职场文书
女生节标语
2014/06/26 职场文书
民用住房租房协议书
2014/10/29 职场文书
2014幼儿园卫生保健工作总结
2014/12/05 职场文书