我发现调试HTML5离线应用程序很麻烦。我发现本文中的代码可帮助我弄清楚我的应用程序出了什么问题:
http://jonathanstark.com/blog/2009/09/27/debugging-html-5-offline-application-cache/
Jonathan Stark调试HTML 5脱机应用程序缓存
如果您希望提供对Web应用程序的脱机访问,则HTML5中可用的“脱机应用程序缓存”非常有用。但是,这是一个巨大的PITA,需要调试,尤其是如果您仍在努力解决问题时。
如果您在缓存清单中苦苦挣扎,请在主HTML页面中添加以下JavaScript,并使用Firefox中的Firebug或Safari中的“调试”>“显示错误控制台”在控制台中查看输出。
如有任何疑问,请在评论中添加PLMK。
HTH,
Ĵ
var cacheStatusValues = [];
cacheStatusValues[0] = 'uncached';
cacheStatusValues[1] = 'idle';
cacheStatusValues[2] = 'checking';
cacheStatusValues[3] = 'downloading';
cacheStatusValues[4] = 'updateready';
cacheStatusValues[5] = 'obsolete';
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);
function logEvent(e) {
var online, status, type, message;
online = (navigator.onLine) ? 'yes' : 'no';
status = cacheStatusValues[cache.status];
type = e.type;
message = 'online: ' + online;
message+= ', event: ' + type;
message+= ', status: ' + status;
if (type == 'error' && navigator.onLine) {
message+= ' (prolly a syntax error in manifest)';
}
console.log(message);
}
window.applicationCache.addEventListener(
'updateready',
function(){
window.applicationCache.swapCache();
console.log('swap cache has been called');
},
false
);
setInterval(function(){cache.update()}, 10000);