我目前正在使用缓存清单（如此处所述）。这实际上使得应用程序必需的资源在用户离线时可用。
然而，它的效果有点过于显著。
缓存清单加载后，Firefox 3.5+将缓存缓存清单中明确引用的所有资源。但是，如果服务器上的文件被更新，并且用户在在线状态下尝试强制刷新页面（包括缓存清单本身），Firefox将绝对拒绝获取任何东西。应用程序仍然完全冻结在最后一个被缓存的点。问题如下：
// 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('<br>'+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
}
我使用了来自HTML5 Rocks: 更新缓存的代码：
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);
Cache-Control: no-cache, private解决了这个问题。免责声明：我在清单和缓存方面的经验仅适用于Safari和FF可能处理一些不同的事情。
你是对的。如果清单上列出的任何文件都找不到，就不会进行缓存。
即使您在线，浏览器也只会检查清单文件。在等待清单文件时，它将继续从缓存中加载站点 - 这样不会延迟呈现 - 但这意味着您在第一次加载时看不到任何更改。
下次加载站点时，如果清单在上次加载时更改，则会加载新文件。
总是需要重新加载两次才能看到任何更改。实际上，有时我需要重新加载3次才能看到更新。不知道为什么。
在调试时，我使用php动态生成我的清单文件，因此不存在文件名拼写错误的机会。我还每次随机生成版本号以强制更新，但仍然可以脱机测试Web应用程序。
完成后，php文件可以仅使用恒定的版本号回显保存的清单数据，并始终使用缓存。
这是我最近玩清单和缓存时学到的一些东西。它非常有效，但可能会令人困惑。
没有到期日。要取消缓存，必须将清单文件更改为空并重新加载。在Safari上，清除用户缓存确实会清除所有缓存文件。
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();
或者，通过在地址栏中输入以下代码，可以手动强制更新缓存：
javascript:applicationCache.update()
嗯，我刚才在修改清单文件后调用了缓存的update()方法，接收到了完整的检查/下载/准备序列，进行了一次重新加载，在我的应用程序的初始页面中，我所做的一个js文件的文本更改迅速出现。
看来我只需要重新加载一次。