如何正确无效的在线/离线网络应用程序的HTML5缓存清单？ [英] How to properly invalidate an HTML5 Cache Manifest for online/offline web apps?

问题描述

我目前正在使用缓存清单（如此处所述）。这有效地提供了必要的资源，以便在用户脱机时运行可用的应用程序。

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

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

1. 我希望Firefox在网络连接失败时只依靠缓存资源。我试过使用FALLBACK块，但无济于事。这是甚至可能的？


2. 如果＃1是不可能的，是否有可能用户强制刷新一个页面，并绕过这个缓存（ctrl-F5不这样做，也不清除浏览器的缓存，令人震惊的是）清除他们的私人数据？或者，缓存清单机制是否支持过期头文件，并且是相对于此处记载的行为而言的？
解决方案我认为我已经明白了：如果某个人的缓存清单中存在错误（例如，引用的文件不存在），那么Firefox将完全停止处理任何与applicationCache相关的任何事情。这意味着，它不会更新缓存中的任何内容，包括缓存的缓存清单。



为了发现这个问题，我从Mozilla借用了一些代码，并将其放到我的应用程序中的一个新的（非缓存的）HTML文件中。最后的消息记录表明，在我的缓存清单中可能存在问题，并且确实存在（缺少文件）。



  
 //方便的状态值数组
 var cacheStatusValues = []; 
 cacheStatusValues [0] ='uncached'; 
 cacheStatusValues [1] ='空闲'; 
 cacheStatusValues [2] ='检查'; 
 cacheStatusValues [3] ='下载'; 
 cacheStatusValues [4] ='updateready'; 
 cacheStatusValues [5] ='废弃'; 
 
 //所有可能事件的监听器
 var cache = window.applicationCache; 
 cache.addEventListener（'cached'，logEvent，false）; 
 cache.addEventListener（'checking'，logEvent，false）; 
 cache.addEventListener（'下载'，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）; 
 
 //将每个事件记录到控制台
函数logEvent（e）{
 var online，status，type，message; 
 online =（isOnline（））？ '是'：'不'; 
 status = cacheStatusValues [cache.status]; 
 type = e.type; 
 message ='online：'+ online; 
 message + ='，event：'+ type; 
 message + ='，status：'+ status; 
 if（type =='error'&& navigator.onLine）{
 message + ='有一个未知的错误，请检查您的Cache Manifest。 
} 
 log（'
'+ message）; 
} 
 
函数日志{
 alert（s）; 
} 
 
函数isOnline（）{
 return navigator.onLine; 
 
 $ b if（！$（'html'）。attr（'manifest'））{
 log（'标签上没有缓存清单'）
 
 
 //在更新准备就绪时交换新下载的文件
 cache.addEventListener（'updateready'，function（e）{
 //不执行如果这是第一个缓存
 if（cacheStatusValues [cache.status]！='idle'）{
 cache.swapCache（）; 
 log（'Swapped / updated the Cache Manifest 。'）; 
} 
} 
，false）; 
 
 //这两个函数检查清单文件的更新
函数checkForUpdates（）{
 cache.update（）; 
 
函数autoCheckForUpdates（）{
 setInterval（function（）{cache.update（）}，10000）; 
} 
 
返回{
 isOnline：isOnline，
 checkForUpdates：checkForUpdates，
 autoCheckForUpdates：autoCheckForUpdates 
} 
  

这当然是有帮助的，但我绝对应该从Mozilla申请一个功能，将错误的缓存清单至少输出到错误控制台。它不应该要求自定义代码附加到这些事件来诊断一个问题，如重命名文件一样简单。




I'm currently using a Cache Manifest (as described here). This effectively makes the necessary resources to run the application available when the user is offline.

Unfortunately, it works a little too well.

After the cache manifest is loaded, Firefox 3.5+ caches all of the resources explicitly referenced in the cache manifest. However, if a file on the server is updated and the user tries force-refreshing the page while online (including the cache-manifest itself), Firefox will absolutely refuse to fetch anything. The application remains completely frozen at the last point it was cached. Questions:

1. I want Firefox to effectively only rely on the cached resources when the network connection fails. I've tried using the FALLBACK block, but to no avail. Is this even possible?
2. If #1 is not possible, is it possible for the user to force-refresh a page and bypass this cache (ctrl-F5 doesn't do it and neither does clearing the browser's cache, shockingly) short of clearing their private data? Alternatively, does the cache-manifest mechanism support expiry headers and is its behavior with respect to this documented anywhere?

解决方案

I think I've got this figured out: if there's an error in one's cache-manifest (say, a referenced file does not exist), then Firefox completely will stop processing anything applicationCache related. Meaning, it won't update anything in your cache, including your cached cache-manifest.

To uncover that this was the issue, I borrowed some code from Mozilla and dropped this into a new (non-cached) HTML file in my application. The final message logged stated that there might be a problem in my cache-manifest, and sure enough there was (a missing file).

// 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
 }

This was certainly helpful, but I should definitely request a feature from Mozilla that prints out malformed cache-manifests at least to the Error Console. It shouldn't require custom code to attach to these events to diagnose an issue as trivial as a renamed file.

这篇关于如何正确无效的在线/离线网络应用程序的HTML5缓存清单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！