如何正确无效的HTML5缓存清单的在线/离线网络应用程序?

前端之家收集整理的这篇文章主要介绍了如何正确无效的HTML5缓存清单的在线/离线网络应用程序?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我目前正在使用高速缓存清单(如描述 here)。这有效地使必要的资源在用户离线时运行可用的应用程序。

不幸的是,它的工作有点太好了。

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

>我想让Firefox有效地只依靠缓存的资源,当网络连接失败。我试过使用FALLBACK块,但没有效果。这是可能吗?
>如果#1不可能,用户是否可能强制刷新页面并绕过此缓存(ctrl-F5不会这样做,也不清除浏览器的缓存,没有清除其私有数据)?或者,缓存清单机制是否支持过期标头,并且是否相对于此记录在任何地方的行为?

解决方法

我想我有这个想法:如果有一个错误在一个缓存清单(比如说,一个被引用的文件不存在),那么Firefox完全将停止处理与applicationCache相关的任何东西。这意味着,它不会更新缓存中的任何内容包括缓存的缓存清单。

为了揭示这是问题,我borrowed some code from 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',false);
 cache.addEventListener('downloading',false);
 cache.addEventListener('error',false);
 cache.addEventListener('noupdate',false);
 cache.addEventListener('obsolete',false);
 cache.addEventListener('progress',false);
 cache.addEventListener('updateready',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的功能,打印出格式不正确的缓存清单至少到错误控制台。它不应要求自定义代码附加到这些事件,以将问题诊断为与重命名文件不重要。

原文链接:https://www.f2er.com/html5/170060.html

猜你在找的HTML5相关文章