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

问题描述

我目前正在使用缓存清单(如此处所述).这有效地使用户离线时运行应用程序所需的资源可用.

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.

加载缓存清单后，Firefox 3.5+ 会缓存缓存清单中明确引用的所有资源.但是，如果服务器上的文件被更新并且用户在线时尝试强制刷新页面(包括缓存清单本身)，Firefox 将绝对拒绝获取任何内容.应用程序在它被缓存的最后一点保持完全冻结.问题:

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. 我希望 Firefox 仅在网络连接失败时有效地依赖缓存的资源.我试过使用 FALLBACK 块，但无济于事.这甚至可能吗?
2. 如果 #1 是不可能的，用户是否有可能强制刷新页面并绕过这个缓存(ctrl-F5 不会这样做，也不会清除浏览器的缓存，令人震惊)除了清除他们的私人数据?或者，缓存清单机制是否支持到期标头，其行为是否记录在任何地方?

推荐答案

我想我已经弄清楚了:如果一个人的缓存清单中有错误(例如，引用的文件不存在)，那么 Firefox 完全将停止处理与 applicationCache 相关的任何内容.这意味着，它不会更新缓存中的任何内容，包括缓存的缓存清单.

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.

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

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
 }

这当然很有帮助，但我绝对应该要求 Mozilla 提供一项功能，该功能至少可以将格式错误的缓存清单打印到错误控制台.不应需要将自定义代码附加到这些事件来诊断与重命名文件一样微不足道的问题.

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.

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