HTML教程：Application Cache的使用方法_HTML教程(2)_H5之家

　　images/logo3.png

    注意：引用了你的manifest文件的HTML文件都会自动被缓存，因此，没有必要在你的manifest文件中再指定这个文件，但是，在manifest文件中指定这个文件是一种更好的做法。

    注意：页面上基于SSL的HTTP cache headers以及caching restrictions都会被cache manifests重写。因此，基于https的页面也能离线工作。

    更新缓存(CACHE)

    如果一个应用是在离线情况下，那么它会保持它的缓存状态，除非有以下事件发生：

    用户清除了浏览器中存储有你的站点的数据。

    manifest file 被修改了。注意：修改了在manifest文件中列出的某个文件并不会让浏览器重新缓存资源。必须是manifest文件本身改变了，才会重新进行缓存。
    app cache通过编程更新了。
    缓存状态CACHE STATUS
    在程序中，你可以通过window.applicationCache 对象来访问浏览器的app cache。你可以查看 status 属性来获取cache的当前状态：

var appCache = window.applicationCache;

switch (appCache.status) {

case appCache.UNCACHED: // UNCACHED == 0

　　return ‘UNCACHED’;

　　break;

　　case appCache.IDLE: // IDLE == 1

　　return ‘IDLE’;

　　break;

　　case appCache.CHECKING: // CHECKING == 2

　　return ‘CHECKING’;

　　break;

　　case appCache.DOWNLOADING: // DOWNLOADING == 3

　　return ‘DOWNLOADING’;

　　break;

　　case appCache.UPDATEREADY: // UPDATEREADY == 4

　　return ‘UPDATEREADY’;

　　break;

　　case appCache.OBSOLETE: // OBSOLETE == 5

　　return ‘OBSOLETE’;

　　break;

　　default:

　　return ‘UKNOWN CACHE STATUS’;

　　break;

　　};

为了通过编程更新cache，首先调用 applicationCache.update()。这将会试图更新用户的 cache(要求manifest文件已经改变)。最后，当 applicationCache.status 处于 UPDATEREADY 状态时，调用applicationCache.swapCache()，旧的cache就会被置换成新的。

var appCache = window.applicationCache;

appCache.update(); // Attempt to update the user’s cache.

　　…

　　if (appCache.status == window.applicationCache.UPDATEREADY) {

　　appCache.swapCache(); // The fetch was successful, swap in the new cache.

　　}
注意：像这样使用 update()和swapCache()并不会将更新后的资源呈现给用户。这仅仅是让浏览器检查manifest文件是否发生了更新，然后下载指定的更新内容，重新填充app cache。因此，要让用户看到更新后的内容，需要两次页面下载，一次是更新app cache，一次是更新页面内容。

好消息是，你可以避免两次页面下载带来的麻烦。为了让用户能看到你的站点的最新版本，设置一个监听器来监听页面加载时的updateready 事件。

// Check if a new cache is available on page load.

　　window.addEventListener(‘load’, function(e) {

　　window.applicationCache.addEventListener(‘updateready’, function(e) {

　　if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {

　　// Browser downloaded a new app cache.

　　// Swap it in and reload the page to get the new hotness.

　　window.applicationCache.swapCache();

　　if (confirm(‘A new version of this site is available. Load it?’)) {

　　window.location.reload();

　　}

　　} else {

　　// Manifest didn’t changed. Nothing new to server.

　　}

　　}, false);

　　APPCACHE事件(APPCACHE EVENTS)
也许你已经想到了，还有更多事件可以反映出cache的状态。在诸如下载、app cache更新、出现错误等事件都会让浏览器触发相应事件。下面的代码片段为每一类cache event都设置了监听器：

　　function handleCacheEvent(e) {

　　//…

　　}

　　function handleCacheError(e) {

　　alert(‘Error: Cache failed to update!’);

　　};

　　// Fired after the first cache of the manifest.

　　appCache.addEventListener(‘cached’, handleCacheEvent, false);

　　// Checking for an update. Always the first event fired in the sequence.

　　appCache.addEventListener(‘checking’, handleCacheEvent, false);

　　// An update was found. The browser is fetching resources.

　　appCache.addEventListener(‘downloading’, handleCacheEvent, false);

　　// The manifest returns 404 or 410, the download failed,

　　// or the manifest changed while the download was in progress.

　　appCache.addEventListener(‘error’, handleCacheError, false);

　　// Fired after the first download of the manifest.

　　appCache.addEventListener(‘noupdate’, handleCacheEvent, false);

　　// Fired if the manifest file returns a 404 or 410.

　　// This results in the application cache being deleted.

　　appCache.addEventListener(‘obsolete’, handleCacheEvent, false);

　　// Fired for each resource listed in the manifest as it is being fetched.

　　appCache.addEventListener(‘progress’, handleCacheEvent, false);

　　// Fired when the manifest resources have been newly redownloaded.