HTML 5 学习之应用程序缓存
HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势：
离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
浏览器支持
所有主流浏览器均支持应用程序缓存，除了 Internet Explorer。
Cache Manifest 基础
如需启用应用程序缓存，请在文档的 <html> 标签中包含 manifest 属性：
- <!DOCTYPE HTML>
- <html manifest="demo.appcache">
- ...
- </html>
每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。
manifest 文件的建议的文件扩展名是：".appcache"。
请注意，manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置。
Manifest 文件
manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。
manifest 文件可分为三个部分：
CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
上述资料copy自http://www.w3school.com.cn/html5/html_5_app_cache.asp
下面贴一下我自己操作的流程：
1、web容器配置。Application Cache的核心是manifest 文件，要加载manifest 文件，就要先让web容易认识这个东东，所以要先配置MIME-type 映射。我用的是tomcat容器，找到conf/web.xml文件，在那一大堆<mime-mapping>后面加上manifest配置
- <!--html5 mime-type setting -->
- <mime-mapping>
- <extension>manifest</extension>
- <mime-type>text/cache-manifest</mime-type>
- </mime-mapping>
- <!--html5 mime-type setting -->
，保存重启，完成第一步。
2、编写manifest文件。我的manifest文件为cache/demo.appcache，内容入下：
- CACHE MANIFEST
- # 2012-11-01 v1.0.0
- ../image/baidu_sylogo1.gif
- NETWORK:
- ../image/cat.gif
- FALLBACK:
- 404.html
3、html使用manifest文件。
- <!DOCTYPE>
- <html manifest="../cache/demo.appcache">
- <head>
- <title>test4.html</title>
- <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
- <meta http-equiv="description" content="this is my page">
- <meta http-equiv="content-type" content="text/html; charset=UTF-8">
- </head>
- <body>
- <div>
- <img alt="aaa" src="../image/baidu_sylogo1.gif" >
- <img id="msg" alt="bbb" src="" >
- <script type="text/javascript">
- var msg=document.getElementById("msg");
- msg.src='../image/cat.gif';
- </script>
- </div>
- </body>
- </html>
baidu_sylogo1.gif为缓存，而cat.gif是直接从服务器读取。
4、测试。笔者用chrome测试了一下正常显示，firefox也OK。不过PC上看不出啥来（比较明显的是manifest 文件中的路径配置错误，debug模式会报错，正常的情况下浏览器会提示是否使用xxx网站提供的静态数据），我用我自己的手机测试了一下，效果比较明显（WI-FI坏境下）。刷新页面的速度很快，关闭WI-FI时，重新刷页面，可以看到第一个图片，而第二个图片显示不出来。
HTML 5 学习之应用程序缓存的更多相关文章
- HTML5学习(九)----应用程序缓存
参考教程:http://www.w3school.com.cn/html5/html_5_app_cache.asp 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 w ...
- HTML5 学习笔记 应用程序缓存
使用html5 通过创建cache manifest文件,可以轻松地创建web应用的离线版本. html5引入了应用程序缓存,这意味着web应用可进行缓存,并可在没有因特网连接时进行访问. 应用程序缓 ...
- 从零开始学 Web 之 HTML5（三）网络监听，全屏，文件读取，地理定位接口，应用程序缓存
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 13本热门书籍免费送！（Python、SpingBoot、Entity Framework、Ionic、MySQL、深度学习、小程序开发等）
七月第一周,网易云社区联合清华大学出版社为大家送出13本数据分析以及移动开发的书籍(Python.SpingBoot.Entity Framework.Ionic.MySQL.深度学习.小程序开发等) ...
- HTML 5 应用程序缓存manifest
什么是应用程序缓存(Application Cache)? HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. 应用程序缓存为应用带来三个优势: 离线浏 ...
- HTML5应用程序缓存Application Cache
什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...
- HTML 5 应用程序缓存(下)
Manifest 文件manifest 文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容). manifest 文件可分为三个部分: CACHE MANIFEST - 在此标题下列出的 ...
- HTML 5 应用程序缓存(上)
什么是应用程序缓存(Application Cache)?HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. 应用程序缓存为应用带来三个优势: 离线浏览 ...
- MyBatis学习总结(七)——Mybatis缓存（转载）
孤傲苍狼 只为成功找方法,不为失败找借口! MyBatis学习总结(七)--Mybatis缓存 一.MyBatis缓存介绍 正如大多数持久层框架一样,MyBatis 同样提供了一级缓存和二级缓存的 ...
随机推荐
- 将已有项目导入Gitlab
登陆GitLab,创建添加项目. 写入项目的基本信息,包括名称.描述.权限等等. cd existing_folder git init git remote add origin git@10.10 ...
- iOS获取文件路径
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px "PingFang SC"; color: #008400 } p.p2 ...
- Quartz2D介绍
一.什么是Quartz2D Quartz 2D是⼀个二维绘图引擎,同时支持iOS和Mac系统 Quartz 2D能完成的工作: 绘制图形 : 线条\三角形\矩形\圆\弧等 绘制文字 绘制\生成图片(图 ...
- iOS FMDB
FMDB FMDB概述 什么是FMDB * FMDB是iOS平台的SQLite数据库框架 * FMDB以OC的方式封装了SQLite的C语言API FMDB的优点 * 使用起来更加面向对象,省去了很多 ...
- mysql模拟插入数据表
由于测试或者学习需要,我们要经常向一个新建的数据表插入几百万行以上的数据来验证我们的一些想法,比如索引的合理构建,表字段类型的设计等等,下面跟大家演示如何往一个新建的数据表插入N多条数据. 1.新建一 ...
- css3投影讲解、投影
迷茫了好一段时间,今天开始整理一下自己,同时也整理下新的知识. CSS3: 从头开始做起:现在在页面中用到最多的是图片/容器投影,文字投影: 接下来就总结一个投影问题: box-shadow:阴影类型 ...
- TextArea里Placeholder换行问题
页面上使用TextArea控件时,会时不时的想给个提示,比如按照一定方式操作之类的.正常情况下,会使用Placeholder,但这样的提示是不会换行的,无论是用\r\n,还是用<br/>, ...
- Eddy's digital Roots（九余数定理）
Eddy's digital Roots Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Oth ...
- C语言学习second--C语言基础学习
1.标准C语言 C语言诞生于20世纪70年代,年龄比我们自己还要大,期间产生了很多标准,但是各种编译器对标准的支持不尽相同. ANSI C是使用的最广泛的一个标准,也是第一个正式标准,被称为“标准C语 ...
- JSONP(转）
1.一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面.动态网页.web服务.WCF,只要是跨域请求,一律不准: 2.不过我们又发现,Web页面上调用js文件时则不 ...