`
liuguofeng
  • 浏览: 434945 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

HTML5 使用application cache 接口实现离线数据缓存

阅读更多

 

1.配置缓存文件 cache manifest

MIME TYPE：text/cache-manifest
文件名称：name.appcache
作用：用于配置需要缓存的文件

2.使用方法

在服务器上添加MIME TYPE
在apache virtual host 中添加

[plain] view plaincopy
  1. AddType text/cache-manifest .appcache  

创建 name.manifest，文件后缀可自定义，定义后需要在服务器上添加对应的MIME TYPE

[plain] view plaincopy
  1. CACHE MANIFEST  
  2.   
  3. #VERSION 1.0  
  4.   
  5. CACHE:  
  6. index.html  
  7. ./js/jquery.js  
  8. ./css/style.css  
  9.   
  10. NETWORK:  
  11. ./upload/  
  12.   
  13. FAILBACK:  
  14. ./proxy/ proxy.html  

CACHE MANIFEST：文件标识
#VERSION 1.0 ：版本号，只是一行注释，但改变可以更新缓存
CACHE：表示要缓存的文件
NETWORK：表示需要连接服务器的文件
FAILBACK：表示当没有响应时的替代方案


<html>标签添加manifest属性

[html] view plaincopy
  1. <html manifest="name.appcache">  

3.更新方法

1.自动更新：浏览器在第一次访问时访问应用缓存，之后只会在cache manifest文件发生变化时更新缓存（即使注释变化也会更新，#VERSION 1.0的作用），而cache manifest中的资源文件发生变化则不会触发更新。

2.手动更新：以编程方法更新缓存，先调用applicationCache.update()，此操作尝试更新用户的缓存（前提是cache manifest文件有更改）。然后当applicationCache.status为UPDATEREADY状态时，调用applicationCache.swapCache()即可将原缓存换成新缓存。

代码如下：

[javascript] view plaincopy
  1. var appCache = window.applicationCache;  
  2. appCache.update(); // Attempt to update the user's cache.  
  3. ...  
  4. if (appCache.status == window.applicationCache.UPDATEREADY) {  
  5.     appCache.swapCache(); // The fetch was successful, swap in the new cache.  
  6. }  

使用update() 和 swapCache() 不会向用户提供更新的资源，只会让浏览器检查是否有新的cache manifest清单，下载指定的更新内容及重新填充应用缓存。因此需要两次加载才能向用户提供新内容。第一次是获得新的应用缓存，第二次是刷新网页内容。

避免重新加载两次的麻烦，可以设置监听器，监听网页加载时updateready的事件。

代码如下：

[javascript] view plaincopy
  1. // Check if a new cache is available on page load.  
  2. window.addEventListener('load', function(e) {  
  3.     window.applicationCache.addEventListener('updateready', function(e) {  
  4.         if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {  
  5.         // Browser downloaded a new app cache.  
  6.         // Swap it in and reload the page to get the new hotness.  
  7.             window.applicationCache.swapCache();  
  8.             if (confirm('A new version of this site is available. Load it?')) {  
  9.                 window.location.reload();  
  10.             }  
  11.         } else {  
  12.             // Manifest didn't changed. Nothing new to server.  
  13.         }  
  14.     }, false);  
  15. }, false);  

4.在线状态检测和监视

检测：navigator.onLine 属性表示当前是否在线，如果为 true，表示在线。如果为 false， 表示离线。
监视：当在线/离线状态切换时，会触发online/offline事件，这两个事件触发在body元素上，并且沿着document.body，document 和 window的顺序冒泡。

5.测试

chromw 浏览器的自带测试工具，console会显示缓存的情况

[html] view plaincopy
  1. Document was loaded from Application Cache with manifest http://localhost/fdipzone/test.appcache main.html:31  
  2. Application Cache Checking event main.html:31  
  3. Application Cache Downloading event main.html:31  
  4. Application Cache Progress event (0 of 1) http://localhost/fdipzone/main.html main.html:31  
  5. Application Cache Progress event (1 of 1)  main.html:31  
  6. Application Cache UpdateReady event   

6.注意事项

1. 站点离线存储的容量限制是5M
2. 如果manifest文件，或者内部列举的某一个文件不能正常下载，整个更新过程将视为失败，浏览器继续全部使用老的缓存
3. 引用manifest的html必须与manifest文件同源，在同一个域下
4. 在manifest中使用的相对路径，相对参照物为manifest文件
5. CACHE MANIFEST字符串应在第一行，且必不可少
6. 系统会自动缓存引用清单文件的 HTML 文件
7. manifest文件中CACHE则与NETWORK，FALLBACK的位置顺序没有关系，如果是隐式声明需要在最前面
8. FALLBACK中的资源必须和manifest文件同源
9. 当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。
10. 站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问
11. 当manifest文件发生改变时，资源请求本身也会触发更新

 

 

http://blog.csdn.net/fdipzone/article/details/12718945

 

分享到：
| Android SDK版本和ADT版本
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题

    离线访问对基于网络的应用而言越来越重要,虽然所有浏览器都有缓存机制，但它们并不可靠,HTML5 使用 ApplicationCache 接口解决了由离线带来的部分难题,需要的朋友可以参考下

    HTML5 manifest离线缓存的示例代码

    HTML5 使用 ApplicationCache 接口解决了由离线带来的部分难题。 使用缓存接口可为您的应用带来以下三个优势： 离线浏览 – 用户可在离线时浏览您的完整网站 速度 – 缓存资源为本地资源，因此加载速度较快。 ...

    HTML5实现应用程序缓存(Application Cache)

    为什么要使用Application Cache技术？ 在HTML5之前，我们需要接入网络才能访问，这毫无疑问是网站多次请求服务器，...实际开发中，主要是使用Application Cache和LocalStorage技术，它们来自HTML5技术。 （1）Applicati

    HTML5用户指南

    　applicationcache 　使用清单来检测连接性 　清除缓存 　小结 第8章　拖放 　深入拖动 　拖动数据的互操作性 　如何拖动任意元素 　添加定制的拖动图标 　可访问性 　小结 第9章　geolocation 　为访问者标记一个...

    HTML5 应用程序缓存

    使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。 什么是应用程序缓存（Application Cache）？ HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时...

    html5应用缓存_动力节点Java学院整理

    HTML5引入了应用程序缓存技术，意味着web应用可进行缓存，并在没有网络的情况下使用，通过创建cache manifest文件，可以轻松的创建离线应用。 Application Cache带来的三个优势是： ① 离线浏览 ② 提升页面载入速度...

    HTML5程序设计（第2版）.[荷]Peter Lubbers(带详细书签).pdf

    12.3 使用HTML5离线Web应用构建应用 261 12.3.1 创建记录资源的manifest文件 263 12.3.2 创建构成界面的HTML和CSS 264 12.3.3 创建离线JavaScript 264 12.3.4 检查applicationCache的支持情况 266 12.3.5 为...

    appcache-nanny:离线优先应用程序的自动更新

    appCache保姆教一些方式的applicationCache douchebag！ 众所周知， 。 现在该教一些礼节了– appCache Nanny for Rescue！ HTML文件上不再有清单属性。 无论您是否要离线缓存资产，何时启动... You Are In Control:...

    从入门到精通HTML5——PDF——网盘链接

    　15.1.2 使用blob接口获取文件的类型与大小 282 　15.1.3 通过类型过滤选择的文件 283 　15.2　使用FileReader接口读取文件 285 　15.2.1 检测浏览器是否支持FileReader接口 285 　15.2.2　FileReader接口的方法 ...

    前端浏览器缓存及代码部署

    我前面写过浏览器缓存的文章，也写过html5离线缓存，关于这些缓存，我们很容易搞不清，例如：200 OK (FROM MemoryCache、FROM DiskCache) 及 304 NOT MODIFIED 还有 application cache (离线缓存)等等。 200 from me

    moodoco:MooTools Core 等的 HTML5 离线文档

    然后，页面和相关的 CSS/JS 文件通过离线缓存。 截至目前，Firefox 3.5+、Chrome 4+、Safari 4+、Opera 10.5+ 和 Internet Explorer 8+ 支持 localStorage。 对于 applicationCache，它在 Firefox 3.5+、Chrome 5+...

    html5本地存储 localStorage操作使用详解

     离线缓存（application cache）  indexedDB 和 webSQL 2、localStorage && sessionStorage  过期时间：localStorage 永久存储，永不失效除非手动删除  sessionStorage 浏览器重新打开后就消失了  大小：每个...

    asp.net知识库

    使用.ashx文件处理IHttpHandler实现发送文本及二进制数据的方法 制作一个简单的多页Tab功能 一完美的关于请求的目录不存在而需要url重写的解决方案! 在C#中实现MSN消息框的功能 XmlHttp实现无刷新三联动ListBox 鼠标...

    Hibernate 中文 html 帮助文档

    19.2. 二级缓存（The Second Level Cache） 19.2.1. 缓存映射（Cache mappings） 19.2.2. 策略：只读缓存（Strategy: read only） 19.2.3. 策略:读/写缓存（Strategy: read/write） 19.2.4. 策略:非严格读/写...

    hibernate 体系结构与配置 参考文档(html)

    使用元数据 11. 事务和并发 11.1. Session和事务范围(transaction scope) 11.1.1. 操作单元(Unit of work) 11.1.2. 长对话 11.1.3. 关注对象标识(Considering object identity) 11.1.4. 常见问题 11.2. ...

    详解前端HTML5几种存储方式的总结

    本篇文章主要介绍了前端HTML5几种存储方式的总结 ，主要包括本地存储localstorage，本地存储sessionstorage，离线缓存（application cache），Web SQL，IndexedDB。有兴趣的可以了解一下。

    Hibernate+中文文档

    19.2. 各种缓存提供商对缓存并发策略的支持情况（Cache Concurrency Strategy Support） 20.1. Summary 20.2. SchemaExport命令行选项 20.3. SchemaExport 连接属性 20.4. SchemaUpdate命令行选项 20.5. ...

    Hibernate_3.2.0_符合Java习惯的关系数据库持久化

    19.2. 各种缓存提供商对缓存并发策略的支持情况（Cache Concurrency Strategy Support） 20.1. Summary 20.2. SchemaExport命令行选项 20.3. SchemaExport 连接属性 20.4. SchemaUpdate命令行选项 20.5. ...

    最全Hibernate 参考文档

    19.2. 二级缓存（The Second Level Cache） 19.2.1. 缓存映射（Cache mappings） 19.2.2. 策略：只读缓存（Strategy: read only） 19.2.3. 策略:读/写缓存（Strategy: read/write） 19.2.4. 策略:非严格读/写...

Magicbox
Global site tag (gtag.js) - Google Analytics