manifest 文件
要向使用application cache 需要为页面的html标签添加manifest属性，属性值是manifest文件路径，可以使用同源的绝对地址，也可以使用相对地址。
<!doctype html> <html lang="zh" manifest="main.manifest"> </html>
application cache是通过mannifest文件来管理的，manifest文件是简单的文本文件，内容是需要被缓存供离线使用的文件列表，及不需要被缓存或读取缓存失败的文件控制。mannifest文件可以使用任意拓展名，但需要在服务器中添加MIME类型匹配，使用apache比较简单，如果使用.manifest作为拓展名在apache配置文件中添加
AddType text/cache-manifest .appcache
使用IIS的话通过界面找到添加MIME窗口添加即可
如何配置
下面是一个manifest文件的示例
main.manifest
1 CACHE MANIFEST 2 #version 0.2.0 3 #date: Nov 24 2013 4 5 CACHE: 6 css/reset.css 7 css/main.css 8 js/jquery.js 9 images/bg.png 10 images/bg_hl.jpg 11 images/icons/yes.png 12 images/icons/top.png 13 offline.html 14 15 NETWORK: 16 * 17 18 FALLBACK: 19 index.html offline.html
1. 文件的第一行必须是 CACHE MANIFEST
2. ＃开头的行作为注释语句，所以文件中关于版本和日期都是注释，为了方便维护
3. 网站的缓存不能超过5M
4. 文件资源路径可以使用绝对路径也可以使用相对路径
5. 文件列表中任意一个缓存失败都会导致整个缓存失效，浏览器hui按没有application cache处理
6. 既可以站点使用同一个minifest文件，也可以每个页面使用一个
然后看一下CACHE、NETWORK、和FALLBACK三条指令语句
CACHE：指明需要缓存的资源文件,浏览器会自动缓存带有manifest属性的html页面，所以yinyongwmanifest文件的页面不用写在里面
NETWORK：不需要缓存的文件，名字就叫网络工作嘛，可以使用通配符
FALLBACK：无法访问缓存文件的备选文件，也可以使用通配符，上边例子的配置，读取不到index.html的话就会跳转至offline.html
manifest文件在检测到需要更新后，在下次载入页面时才会生效，故如果想在当次生效就需要手动刷新页面，代码如下：
window.addEventListener("load", function (e) {
window.applicationCache.addEventListener("updateready", function () {
if (window.applicationCache.status === window.applicationCache.UPDATEREADY) {
try{
applicationCache.swapCache();
}catch(e){}
getOriginNativeHeader();
window.location.reload();
}
}, false)
}, false);
相关推荐
!!!!!服务器需要添加配置!!!!!!!!! 建议使用Google Chrome 测试 我的是Apache服务器 conf/httpd.conf 文件的mime_module 中添加 . . . AddType text/cache-manifest .appcache </IfModule>
在我们的3G版网站的项目中使用了html5 application cache，将大部分图片资源、js、css等静态资源放在manifest文件中,需要了解的朋友可以参考下
使用Application Cache缓存了页面及静态资源，发现用ajax请求数据，或者加载未缓存的资源时，无法加载，报错如下： CAUTION:Provisional headers are shown， 解决方法： manifest.appcache配置文件中NETWORK:...
10.3.4 检查applicationCache的支持情况 210 10.3.5 为Update按钮添加处理函数 211 10.3.6 添加Geolocation跟踪代码 211 10.3.7 添加Storage功能代码 212 10.3.8 添加离线事件处理程序 212 10.4 小结 213 第11章 ...
10.3.4 检查applicationCache的支持情况 210 10.3.5 为Update按钮添加处理函数 211 10.3.6 添加Geolocation跟踪代码 211 10.3.7 添加Storage功能代码 212 10.3.8 添加离线事件处理程序 212 10.4 小结 213 第11章 ...
10.3.4 检查applicationcache的支持情况 210 10.3.5 为update按钮添加处理函数 211 10.3.6 添加geolocation跟踪代码 211 10.3.7 添加storage功能代码 212 10.3.8 添加离线事件处理程序 212 10.4 小结 213 第11...
10.3.4 检查applicationCache的支持情况 210 10.3.5 为Update按钮添加处理函数 211 10.3.6 添加Geolocation跟踪代码 211 10.3.7 添加Storage功能代码 212 10.3.8 添加离线事件处理程序 212 10.4 小结 213 第11章 ...
10.3.4 检查applicationCache的支持情况 210 10.3.5 为Update按钮添加处理函数 211 10.3.6 添加Geolocation跟踪代码 211 10.3.7 添加Storage功能代码 212 10.3.8 添加离线事件处理程序 212 10.4 小结 213 第11...
12.3.4 检查applicationCache的支持情况 266 12.3.5 为Update按钮添加处理函数 266 12.3.6 添加Geolocation跟踪代码 267 12.3.7 添加Storage功能代码 267 12.3.8 添加离线事件处理程序 268 12.4 小结 268 第13...
10.3.4 检查applicationCache的支持情况 210 10.3.5 为Update按钮添加处理函数 211 10.3.6 添加Geolocation跟踪代码 211 10.3.7 添加Storage功能代码 212 10.3.8 添加离线事件处理程序 212 10.4 小结 213 第11章 ...
10.3.4 检查applicationCache的支持情况 210 10.3.5 为Update按钮添加处理函数 211 10.3.6 添加Geolocation跟踪代码 211 10.3.7 添加Storage功能代码 212 10.3.8 添加离线事件处理程序 212 10.4 小结 213 第11...
10.3.4 检查applicationCache的支持情况 210 10.3.5 为Update按钮添加处理函数 211 10.3.6 添加Geolocation跟踪代码 211 10.3.7 添加Storage功能代码 212 10.3.8 添加离线事件处理程序 212 10.4 小结 213 第11...
10.3.4 检查applicationCache的支持情况 210 10.3.5 为Update按钮添加处理函数 211 10.3.6 添加Geolocation跟踪代码 211 10.3.7 添加Storage功能代码 212 10.3.8 添加离线事件处理程序 212 10.4 小结 213 第11...
HTML5引入了应用程序缓存技术，意味着web应用可进行缓存，并在没有网络的情况下使用，通过创建cache manifest文件，可以轻松的创建离线应用。 Application Cache带来的三个优势是： ① 离线浏览 ② 提升页面载入速度...
10.3.4 检查applicationCache的支持情况 210 10.3.5 为Update按钮添加处理函数 211 10.3.6 添加Geolocation跟踪代码 211 10.3.7 添加Storage功能代码 212 10.3.8 添加离线事件处理程序 212 10.4 小结 213 第11...
展示一个怎么应用html5中的Application cache的例子
HTML5 使用 ApplicationCache 接口解决了由离线带来的部分难题。 使用缓存接口可为您的应用带来以下三个优势： 离线浏览 – 用户可在离线时浏览您的完整网站 速度 – 缓存资源为本地资源，因此加载速度较快。 ...
开放手机联盟， Open Handset Alliance ：是美国 Google 公司与 2007 年 11 月 5 日宣布组建的一个全球性的联 盟组织。这一联盟将会支持 Google 发布的 Android 手机操作系统或者应用软件，共同开发名为 Android 的 ...
使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。 什么是应用程序缓存（Application Cache）？ HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时...
第12章 HTML 5与HTML 4的区别 225 视频讲解：51分钟 12.1 语法的改变 226 12.1.1 HTML 5的语法变化 226 12.1.2 HTML 5中的标记方法 226 12.1.3 HTML 5语法中的3个要点 227 12.1.4 标签实例 228 12.2...