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

Posted alllin

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML5 使用application cache 接口实现离线数据缓存相关的知识，希望对你有一定的参考价值。

1.配置缓存文件 cache manifest

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

2.使用方法

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

  1. AddType text/cache-manifest .appcache  

 

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

  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 manifest="name.appcache"> 

 

3.更新方法

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

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

  1. ar 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的事件。

  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的顺序冒泡。

 

 

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文件发生改变时，资源请求本身也会触发更新

 

以上是关于HTML5 使用application cache 接口实现离线数据缓存的主要内容，如果未能解决你的问题，请参考以下文章

HTML5-应用程序缓存（Application Cache）

HTML5应用程序缓存Application Cache

HTML5应用程序缓存Application Cache

HTML5应用程序缓存Application Cache

HTML5-离线缓存（Application Cache）

HTML5应用程序缓存Application Cache.RP