应用程序缓存 API(简称“AppCache”)

Internet Explorer 10 和使用 JavaScript 的 Windows 应用商店应用支持应用程序缓存 API(或称 AppCache),AppCache 在 HTML5 规范中进行定义,通过它可创建脱机 Web 应用程序。AppCache 使网页能够在本地缓存(或保存)资源,包括图像、脚本库和样式表等。此外,AppCache 还允许使用标准的统一资源标识符 (URI) 表示法从缓存内容中提供 URL。

使用 AppCache 在本地保存资源,你可以通过减少主机服务器的请求数量来改善网页性能;此外,你还可以脱机访问缓存的资源。

若要在本地缓存资源,请执行下列操作:

1. 创建一个清单文件,以指定你要保存的资源。
2. 在要使用缓存资源的每个网页中引用该清单文件。

创建清单文件

清单文件是一个针对网页所使用的资源指定缓存行为的文本文件,参见下面的示例。


CACHE MANIFEST

CACHE:
# Defines resources to be cached.
script/library.js
css/stylesheet.css
images/figure1.png

FALLBACK:
# Defines resources to be used if non-cached
# resources cannot be downloaded, for example
# when the browser is offline..
photos/ figure2.png

NETWORK:
# Defines resources that will not be cached.
figure3.png


清单文件分为以下各节:
  • CACHE: 节指定将被存储与本地的资源。在此示例中,缓存三个文件。
  • FALLBACK: 节指定当其他资源不可用时将使用的资源。例如,此示例将 figure2.png 指定为 photos 文件夹的回退图像。如果浏览器无法访问 photos 文件夹中的图像(由于浏览器脱机或服务器无法访问),则 figure2.png 将会替换在已呈现标记中的不可用图像。作为结果,figure2.png 将被缓存到本地。
  • NETWORK: 节指定当有网络连接时将要访问的资源。本节中的资源不进行缓存。本节允许使用通配符 (*) 字符以指示所有其他资源都不应该缓存。
清单文件可包含任意数量的这些节,并且可以重复;但新的节必须以节标题开头,且后面要加冒号,如上面的示例所示。如果未提供节标题,则假定使用 CACHE: 标题。下面的示例演示了一个简单的清单。

CACHE MANIFEST
script/library.js
css/stylesheet.css
images/figure1.png


此外,清单文件:
  • 必须使用 8 位 Unicode 转换格式 (UTF-8) 字符编码。
  • 必须接受文本/缓存清单 MIME 类型。
  • 必须以“CACHE MANIFEST”行开始。
  • 可以包含注释,但前面必须加英镑标记 (#)。

有关更多信息,请参阅缓存清单语法

声明清单

要将清单与网页关联,需将清单文件的名称分配给 html 元素的 manifest 属性,如下面得示例所示。


<!doctype html>
<html manifest="appcache.manifest">
 <head>
  <title>A Web Page</title>
  <script src="library.js"></script>
  <link rel="stylesheet" href="stylesheet.css">
 </head>
 <body onload="doSomething();">
  <p>Results go here: <span id="results">Unknown</span></p>
 </body>
</html>


在此示例中,网页将“appcache.manifest”作为清单文件进行声明。清单声明可像任何其他文件引用一样被解释。由于此示例使用相对文件名称,所以该清单被假定位于与网页自身相同的目录中。

注意  清单中的文件引用被解释为清单文件的相对位置,而不是声明它的网页。

对清单来说,没有必要包含声明该清单的网页名称;声明清单的网页会被自动缓存。

ApplicationCache 对象

Internet Explorer 10 还支持 ApplicationCache 对象,该对象提供可用来管理应用程序缓存的属性。此外,你还可以定义显示缓存进程进度的事件处理程序。

使用 window 对象的 applicationCache 属性(或 worker 对象)以访问 ApplicationCache 对象,如下面的示例所示。


var sCacheStatus = "Not supported";
if (window.applicationCache) 
{
   var oAppCache = window.applicationCache;
   switch ( oAppCache.status ) 
   {
      case oAppCache.UNCACHED : 
         sCacheStatus = "Not cached"; 
         break;
      case oAppCache.IDLE : 
         sCacheStatus = "Idle"; 
         break;
      case oAppCache.CHECKING : 
         sCacheStatus = "Checking"; 
         break;
      case oAppCache.DOWNLOADING : 
         sCacheStatus = "Downloading"; 
         break;
      case oAppCache.UPDATEREADY : 
         sCacheStatus = "Update ready"; 
         break;
      case oAppCache.OBSOLETE : 
         sCacheStatus = "Obsolete"; 
         break;
      default : 
        sCacheStatus = "Unexpected Status ( " + 
                       oAppCache.status.toString() + ")";
        break;
   }
}
return sCacheStatus;


此示例使用 status 属性为当前通过网页所加载的文档确定应用程序缓存的状态。

ApplicationCache 对象支持两种控制缓存的方法。update 方法启动对更新的异步检查,类似于在首次加载网页时执行的操作。在重新加载该网页或调用 swapCache 方法之前,将会一直使用任何现有的缓存。要开始使用已更新的缓存,需要重新加载网页(手动或以编程方式)或调用 swapCache 方法。当重新加载网页时,因为缓存已更新,所以在重新加载或刷新网页之前不需要调用 swapCache 方法。

注意  在重新加载网页(由用户手动或以编程方式使用 window.location 对象的 reload 方法)之前,网页不会使用已更新的缓存。

ApplicationCache 对象支持以下事件:

  • 当清单已缓存时,将触发 cached 事件。
  • 当检查是否有更新时,将触发 checking 事件。
  • 当下载清单资源时,将触发 downloading 事件。
  • 在下载清单资源期间,将触发 progress 事件。
  • 当出现问题(如 HTML 404 或 410 响应代码)时,将触发 error 事件。当无法下载清单文件时,也会触发该事件。
  • 当缓存有更新的版本可用时,将触发 updateready 事件。
  • 请求更新时将会触发 noupdate 事件,但清单不会发生更改。
  • 当现有的缓存被标记为已过时时,将会触发 obsolete 事件。

下面的示例演示如何为这些事件注册事件处理程序。


if (window.applicationCache) {
  var appCache = window.applicationCache;
   appCache.addEventListener('error', appCacheError, false);
   appCache.addEventListener('checking', checkingEvent, false);
   appCache.addEventListener('noupdate', noUpdateEvent, false);
   appCache.addEventListener('downloading', downloadingEvent, false);
   appCache.addEventListener('progress', progressEvent, false);
   appCache.addEventListener('updateready', updateReadyEvent, false);
   appCache.addEventListener('cached', cachedEvent, false);
}


API 参考

Application Cache API ("AppCache")

有关 Internet Explorer 的 Test Drive 演示

手册演示
公园里的一天

IEBlog 文章

使用 HTML5 AppCache 和 IndexedDB 构建脱机体验

规范

HTML5:第 5.7.2 节

 

 

显示:
© 2015 Microsoft