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实现的多级渐变下拉菜单导航效果代码
Aug 31 HTML / CSS
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
Jan 17 HTML / CSS
关于HTML5的22个初级技巧(图文教程)
Jun 21 HTML / CSS
HTML5 Canvas像素处理使用接口介绍
Dec 02 HTML / CSS
程序设计HTML5 Canvas API
Apr 08 HTML / CSS
使用HTML5拍照示例代码
Aug 06 HTML / CSS
详解HTML5中的manifest缓存使用
Sep 09 HTML / CSS
HTML5实现移动端弹幕动画效果
Aug 01 HTML / CSS
HTML5 FileReader对象的具体使用方法
May 22 HTML / CSS
Html5页面播放M4a音频文件
Mar 30 HTML / CSS
CSS3 实现的图片悬停的切换按钮
Apr 13 HTML / CSS
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
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中的use关键字概述
2014/07/23 PHP
php+mysql数据库实现无限分类的方法
2014/12/12 PHP
Mac系统下搭建Nginx+php-fpm实例讲解
2020/12/15 PHP
一个JS翻页效果
2007/07/23 Javascript
JavaScript Event学习第九章 鼠标事件
2010/02/08 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
2012/10/11 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
2014/10/14 Javascript
Node.js中HTTP模块与事件模块详解
2014/11/14 Javascript
jquery+css3实现会动的小圆圈效果
2016/01/27 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
2016/05/20 Javascript
省市选择的简单实现(基于zepto.js)
2016/06/21 Javascript
js实现的简练高效拖拽功能示例
2016/12/21 Javascript
详解VUE中v-bind的基本用法
2017/07/13 Javascript
使用Bootrap和Vue实现仿百度搜索功能
2017/10/26 Javascript
webpack 单独打包指定JS文件的方法
2018/02/22 Javascript
JavaScript模拟实现自由落体效果
2018/08/28 Javascript
React+TypeScript+webpack4多入口配置详解
2019/08/08 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
2020/10/29 Javascript
python使用datetime模块计算各种时间间隔的方法
2015/03/24 Python
Python输出PowerPoint(ppt)文件中全部文字信息的方法
2015/04/28 Python
python的paramiko模块实现远程控制和传输示例
2017/10/13 Python
python实现机械分词之逆向最大匹配算法代码示例
2017/12/13 Python
Pycharm小白级简单使用教程
2020/01/08 Python
Python中SQLite如何使用
2020/05/27 Python
使用CSS禁止textarea调整大小功能的方法
2015/03/13 HTML / CSS
怎样从/向数据文件读/写结构
2014/11/23 面试题
酒吧总经理岗位职责
2013/12/10 职场文书
大学自我鉴定
2013/12/20 职场文书
委托书范文
2014/04/02 职场文书
竞赛口号大全
2014/06/16 职场文书
经营目标管理责任书
2014/07/25 职场文书
法院四风对照检查材料思想汇报
2014/10/06 职场文书
中学语文教学反思
2016/02/16 职场文书
创业项目大全(适合在家创业的项目)
2019/08/15 职场文书
Nginx中使用Lua脚本与图片的缩略图处理的实现
2022/03/18 Servers
HTML CSS 一个标签实现带动画的抖音LOGO
2022/04/26 HTML / CSS