HTML5-Offline APIs的简单介绍

1.浏览器支持性检测

if(window.applicationCache) {       // this browser supports offline applications    }

2.在线、离线的状态检测和事件

// When the page loads, set the status to online or offline    function loadDemo() {       if (navigator.onLine) {          log("Online");       } else {          log("Offline");       }    }    // Now add event listeners to notify a change in online status    window.addEventListener("online", function(e) {      log("Online");    }, true);    window.addEventListener("offline", function(e) {      log("Offline");    }, true);

3.manifest
要使用离线功能，需要指定哪些资源离线缓存，这通过标记的manifest属性指定一个以.manifest为扩展名的清单文件，需要离线缓存的资源、不要缓存的资源以及失败的请求替换页都在清单文件中列出。并且，清单文件的MIME类型必须是text/cache-manifest，这个MIME类型要从服务器端进行定义。清单的第一行不能为注释。
失败请求部分包括两个方面，第一个是要请求的内容，可以为文件夹；第二个是请求失败的替换内容。
如果需要更新缓存，只要更新清单文件，浏览器就会自动更新所有缓存。但是，前提是清单文件不被缓存（默认情况下会被缓存），可以通过修改服务器的缓存设置来解决此问题。
示例如下：

CACHE MANIFEST
# 井号行为注释。下面的“CACHE:”可以省略
CACHE:

  # files to cache    about.html    html5.css    index.html    happy-trails-rc.gif    lake-tahoe.JPG

#do not cache signup page
#可以使用一个星号（*），这样，所有未被显式缓存的资源都不会被缓存
NETWORK
signup.html

 FALLBACK    signup.html     offline.html    /app/ajax/      default.html   media/          images/video-fallback.jpg   /               /offline.html

4.applicationCache对象
  window.applicationCache对象是Web离线应用API的核心对象，它包括缓存状态属性 window.applicationCache.status和一些与缓存状态相关的事件属性。

立即学习“前端免费学习笔记（深入）”；

5.缓存状态与事件
  window.applicationCache.status有六种值，如下：
  •0( UNCACHED )：对应oncached事件属性，没有缓存
  •1( IDLE )：对应oncached事件属性，所有缓存清单中的资源处于缓存状态。
  •2( CHECKING )：对应onchecking事件属性，检查缓存。
  •3( DOWNLOADING )：对应ondownloading事件属性，下载缓存。
  •4( UPDATEREADY )：对应onupdateready事件属性，准备更新缓存。
  •5( OBSOLETE )：对应onobsolete事件属性，某个资源已缓存，但清单中没有。
  另有三个事件属性：
  •onerror：产生错误。
  •onnoupdate：没有可用更新。
  •onprogress：正在更新缓存。

6.window.applicationCache.update()方法
  调用该方法请求浏览器更新缓存，包括检查新版本的清单文件和下载必要地新资源。如果没有缓存，或缓存已废弃，则将产生错误。