如何正确使HTML5缓存清单，用于在线网络的应用程序？

StackOverflow https://stackoverflow.com/questions/1715568

题

目前，我正在使用缓存清单(如 在这里，).这有效地使得必要的资源来运行的应用程序时可用的用户是离线。

不幸的是，它的作品有点太清楚了。

后缓存清单载火狐3.5+缓存的所有资源明确地引用缓存清单。然而，如果服务器上的文件被更新和用户的尝试力刷新的网页，同时在线上(包括高速缓存清单本身)，火狐绝对会拒绝获取任何东西。该应用程序仍然完全冻结在最后一点是缓存。问题：

  1. 我希望Firefox有效地只依靠高速缓存资源网络连接时将失败。我已经试用后备块，但无济于事。是这个可能吗?
  2. 如果#1是不可能的，它是可能的用户的力量更新页面和绕过这一高速缓冲存储器(按ctrl-F5不这样做，而且也不清浏览器的高速缓存，令人震惊的)短的清理它们的私人数据？或者，不缓存清单机构的支持效的标题和是其行为相对于这种记录的任何地方?
有帮助吗？

解决方案

我认为我有这个想出：如果有误差中的一个缓存清单(说，引用的文件不存在)，那Firefox完全停止处理任何applicationCache相关。意义，它将不会更新的东西在你的高速缓存，包括高速缓存缓存清单。

揭露，这个问题，我 借来一些代码从Mozilla 并掉了这个进入一个新的(非高速缓存)HTML文件在我的应用程序。最终记录的消息说，有可能是一个问题在我的缓存清单，并确保足够的有(a缺失文件)。


// 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，打印输出格式错误的缓存清单至少错误控制台。它不应该需要定义的代码连接到这些事件的来诊断的问题，因为微不足道作为一个重命名的文件。

其他提示

我已经使用的代码 HTML5岩石：更新的高速缓存:

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);

免责声明：我的经验清单和缓所有野生动物园和FF可以处理一些不同的事情。

  1. 你是相当正确的。如果有任何文件上列出清单就不能被发现，没有缓存会发生。

  2. 甚至如果你是在网上，浏览器将只检查的清单文件。同时等待清单文件，它将继续负荷的站点从高速缓存这种方式，它不延迟渲染，但这意味着你没有看到任何改变。

  3. 下一次该网站载，如果清单上的改变以前的负荷，新的文件将会载入。

它总是需要重新装载两次看到任何改变。事实上，我有时不得不重新加载3次看到更新。不知道为什么。

在调试时，我产生我的清单上的文件飞php，因此没有机会拼写错误，在文件名。我也产生的版本数量随机的每一次强制进行更新，但仍有一线网络应用程序进行测试。

一旦完成，php文件可能只是回音保存的清单数据有一定的版本号和缓存会永远使用。

只是有些事情我学到同清单和缓。它的伟大工程，但可能会造成混淆。

没有到期。要取消，你要改变的清单文件中有没有在这做了重新加载。在野生动物园，清用户的高速缓存并清除所有高速缓存文件。

我有同样的问题：一旦Firefox保存脱机文件，它不会重载它们。铬作为预期的，它检查的清单文件的改变和重新装载的一切如果清单文件的改变。Firefox甚至没有下载的文件清单服务器，因此它不能通知的变化。

经调查，我发现的火狐物缓存缓存文件清单(老式的高速缓冲，不是离线的缓冲存储)。设置高速缓存头的文件清单 Cache-Control: no-cache, private 解决了这个问题。

我做了一个Firefox对其无效的缓存清单和清除HTML5当地储存。

http://sites.google.com/site/keigoattic/home/webrelated#TOC-Firefox-HTML5-Offline-Cache-and-Loc

你也可以无效的缓存清单输入的代码下面的错误控制台:

// invalidates the cache manifest
var mani = "http://.../mysite.manifest"; // manifest URL
Components.classes["@mozilla.org/network/application-cache-service;1"].getService(Components.interfaces.nsIApplicationCacheService).getActiveCache(mani).discard();

或者，通过输入的代码下面的地址栏用手将enforece缓存更新：

javascript:applicationCache.update()

嗯，我只是称为更新()就缓存，后一种编辑改变的清单文件，并获得充分的序列检查/下载/准备好了，有没有一个刷新，并文本的变化，我已经在我的一个js文件，显示在最初的页的我的程序，迅速出现。

看来我只需要一个重新加载。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top