如何正确地使在线/离线网络应用程序的HTML5缓存声明失效？

Question

我目前正在使用缓存声明(如描述的这里)。这实际上使得在用户脱机时运行应用程序所需的资源可用。

不幸的是，它的效果有点太好了。

加载缓存清单后，火狐3.5+缓存缓存清单中显式引用的所有资源。但是，如果服务器上的文件被更新，用户尝试在联机时强制刷新页面(包括缓存-清单本身)，Firefox将绝对拒绝获取任何内容。应用程序在缓存的最后一点仍然是完全冻结的。问题：

1. 我希望Firefox只在网络连接失败时有效地依赖缓存的资源。我试过用后备挡，但没有用。这有可能吗？
2. 如果#1是不可能的，用户是否有可能强制刷新页面并绕过这个缓存(ctrl-F5不这样做，也不清除浏览器的缓存，令人震惊的是)，除非清除他们的私有数据？或者，缓存-清单机制是否支持过期标头，它的行为是否在任何地方都有文档记录？

Answer 1

我想我已经搞清楚了:如果一个人的缓存清单中有错误(比如说，引用的文件不存在)，那么火狐将完全停止处理任何与applicationCache相关的内容。也就是说，它不会更新缓存中的任何内容，包括缓存的缓存-清单。

为了发现这是问题所在，我从Mozilla那里借用了一些代码并将其放到应用程序中的一个新的(非缓存的) HTML文件中。记录的最后一条消息指出，我的缓存清单中可能有一个问题，而且确实存在(一个丢失的文件)。

// Convenience array of status values
var cacheStatusValues = [];
 cacheStatusValues[0] = 'uncached';
 cacheStatusValues[1] = 'idle';
 cacheStatusValues[2] = 'checking';
 cacheStatusValues[3] = 'downloading';
 cacheStatusValues[4] = 'updateready';
 cacheStatusValues[5] = 'obsolete';

 // Listeners for all possible events
 var cache = window.applicationCache;
 cache.addEventListener('cached', logEvent, false);
 cache.addEventListener('checking', logEvent, false);
 cache.addEventListener('downloading', logEvent, false);
 cache.addEventListener('error', logEvent, false);
 cache.addEventListener('noupdate', logEvent, false);
 cache.addEventListener('obsolete', logEvent, false);
 cache.addEventListener('progress', logEvent, false);
 cache.addEventListener('updateready', logEvent, false);

 // Log every event to the console
 function logEvent(e) {
     var online, status, type, message;
     online = (isOnline()) ? 'yes' : 'no';
     status = cacheStatusValues[cache.status];
     type = e.type;
     message = 'online: ' + online;
     message+= ', event: ' + type;
     message+= ', status: ' + status;
     if (type == 'error' && navigator.onLine) {
         message+= ' There was an unknown error, check your Cache Manifest.';
     }
     log('
'+message);
 }

 function log(s) {
    alert(s);
 }

 function isOnline() {
     return navigator.onLine;
 }

 if (!$('html').attr('manifest')) {
    log('No Cache Manifest listed on the  tag.')
 }

 // Swap in newly download files when update is ready
 cache.addEventListener('updateready', function(e){
         // Don't perform "swap" if this is the first cache
         if (cacheStatusValues[cache.status] != 'idle') {
             cache.swapCache();
             log('Swapped/updated the Cache Manifest.');
         }
     }
 , false);

 // These two functions check for updates to the manifest file
 function checkForUpdates(){
     cache.update();
 }
 function autoCheckForUpdates(){
     setInterval(function(){cache.update()}, 10000);
 }

 return {
     isOnline: isOnline,
     checkForUpdates: checkForUpdates,
     autoCheckForUpdates: autoCheckForUpdates
 }

这当然是有帮助的，但我肯定应该要求Mozilla提供一个功能，输出格式错误的缓存--至少在错误控制台上。它不应该要求自定义代码附加到这些事件来诊断像重命名的文件一样琐碎的问题。

Answer 2

我使用了HTML5 Rocks:更新缓存的代码

window.addEventListener('load', function(e) {
  if (window.applicationCache) {
    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);
  }
}, false);

Answer 3

我也遇到了同样的问题:一旦Firefox保存了离线文件，它就不会重新加载它们。Chrome正常工作，它检查清单文件是否有更改，并在清单文件更改时重新加载所有内容。Firefox甚至没有从服务器下载清单文件，所以它不会注意到更改。

经过调查，我发现Firefox正在缓存缓存清单文件(老式的缓存，而不是离线缓存)。将清单文件的缓存头设置为Cache-Control: no-cache, private解决了这个问题。