`
liuguofeng
  • 浏览: 450260 次
  • 性别: 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离线缓存技术 附源码.我们知道h5多了很多新技术,其中之一便是可以离线缓存数据,这样当网络断了时,仍然可以浏览网页

    - [HTML5的离线数据缓存教程](update/HTML5 使用application cache 接口实现离线数据缓存 - 傲雪星枫 - 博客频道 - CSDN.NET.url) 通过以上内容，你应该对HTML5的离线缓存技术有了深入的理解，现在你可以尝试创建...

    html5前端浏览器离线缓存

    HTML5前端浏览器离线缓存，也称为离线存储或应用程序缓存，是HTML5引入的一项重要特性，旨在提升Web应用的性能和用户体验。当用户在网络连接可用时访问一个支持离线缓存的网站，浏览器会自动下载并存储指定的资源，...

    离线缓存demo.rar

    离线缓存是一种重要的技术手段，它允许应用程序在没有网络连接的情况下访问数据，极大地提高了用户体验。这个"离线缓存demo.rar"文件可能包含了一个演示如何实现离线缓存功能的示例项目，但请注意，由于无法直接验证...

    phonegap离线缓存

    在HTML5中，离线缓存是通过`Application Cache`（应用缓存）或`Cache Manifest`（缓存清单）文件实现的。当用户首次访问一个支持离线缓存的网页时，浏览器会下载指定的资源列表并将其存储在本地。这些资源包括HTML、...

    HTML5离线应用

    这一功能通过HTML5的离线存储标准实现，包括Application Cache（应用程序缓存）和Service Worker（服务工作者）。在本案例中，提供的压缩包文件包含了一系列用于展示HTML5离线应用的元素和实践。 1. **notes.html**...

    html5离线存储课程代码

    HTML5离线存储是Web应用程序实现离线工作的关键技术，它允许网页在用户...同时，理解Service Worker的工作原理和使用方法也是现代Web开发的重要技能，因为它不仅可以实现离线缓存，还能进行性能优化和推送通知等功能。

    html5离线存储实例

    之后，即使在网络断开的情况下，浏览器也能从本地缓存加载这些资源，实现离线访问。 然而，Application Cache有其局限性，比如更新管理复杂、不支持搜索和结构化的数据存储等。因此，IndexedDB应运而生。 Indexed...

    离线缓存demo

    离线缓存是一种重要的技术手段，它允许应用程序在用户设备上存储数据，以便在没有网络连接的情况下仍然可以访问。在移动应用开发中，离线缓存尤其重要，因为网络信号不稳定或不可用的情况时常发生。这个"离线缓存...

    HTML5离线应用实例介绍

    ApplicationCache（简称AppCache）是HTML5提供的一种离线存储技术，它允许浏览器缓存应用的资源文件，以便在离线状态下使用。 ##### 定义manifest： - **定义方式**：通过在HTML文档头部添加`&lt;html manifest=...

    HTML5_离线存储技术

    这项技术的核心在于利用HTML5的`Application Cache`（应用缓存）或者称为`Cache Manifest`（缓存清单），通过创建一个清单文件来指定需要离线存储的资源。 **一、离线存储的必要性** 随着移动设备的普及，用户可能...

    [转] 为UIWebView实现离线浏览

    HTML5提供了离线存储机制，即AppCache（Application Cache），允许开发者指定一个资源清单文件，该文件包含了应用需要离线使用的所有静态资源。当用户首次访问网页时，浏览器会自动下载这些资源并缓存到本地，即使...

    html5 离线应用

    这一特性通过HTML5的离线存储标准实现，主要包括Application Cache（应用缓存）和Service Worker。这篇博客可能深入探讨了这两个核心概念，以及如何在实际项目中应用它们。 Application Cache，又称为Manifest文件...

    使用 HTML 5 支持移动 Web 应用程序离线工作

    1. **定义离线缓存策略**：根据应用需求，决定使用 AppCache 还是 IndexedDB，或者两者结合。编写清单文件（对于 AppCache）或设计数据库结构（对于 IndexedDB）。 2. **初始化缓存**：在用户首次访问应用时，使用 ...

    Application Cache未缓存文件无法访问无法加载问题

    在Web开发中，Application Cache（应用缓存）是一种离线存储技术，允许浏览器将网站的部分或全部内容存储在本地，以便在用户离线时仍然可以访问这些内容。然而，使用Application Cache时，可能会遇到未缓存文件无法...

    HTML5离线应用程序.pdf

    Service Worker允许开发者创建脚本去拦截网络请求，实现更复杂的缓存策略和离线功能，而IndexedDB则提供了存储大量结构化数据的能力，可以替代简单的文件缓存。然而，理解并熟练运用`Application Cache`对于理解现代...

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

    例如，当用户首次访问一个支持离线缓存的网站时，浏览器会根据`manifest`文件下载所有指定的资源并存储在本地。一旦网络断开，浏览器将从本地缓存中加载这些资源，而不是尝试从服务器重新获取。 另一个优势是性能...

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

    随着Service Worker的出现，许多开发者已经转向使用Service Worker进行离线缓存和更新控制，因为它提供了更高级的功能和更好的控制。Service Worker可以拦截网络请求，实现智能缓存策略，并且具备更灵活的更新机制。...

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