强制applicationCache重新加载缓存的文件

Question

我正在使用HTML5 applicationCache来存储页面的许多Javascript,CSS,图像等文件.如果我更新其中一个文件,浏览器永远不会重新加载它.我尝试过以下方法:

• 在页面加载时调用applicationCache.update()
• 侦听applicationCache的updateready事件,并调用swapCache()和window.location.reload()
• 向清单文件本身添加时间戳注释以强制浏览器实现清单已更改

当然这不可能是这么难.如何说服浏览器重新请求一些缓存文件？

Answer 1

要强制下载任何新的(或更改的)文件,您必须更新清单文件(添加版本号注释或任何更改都可以).可能发生的是您收到错误.最常见的一种是您可能没有使用正确的mime类型(text/cache-manifest)提供清单.您是否正确配置了服务器？检查此问题的最简单方法是在Chrome中打开该页面,然后在AppCache下的控制台和资源标签中查看是否存在错误(它会报告错误地提供文件.您也可以使用curl -I命令:

curl -I $manifest_file_URL

您的清单文件也可能会被缓存(您可以设置它的expires标头立即过期).还要记住重新加载顺序:您的页面将首先从AppCache加载(如果它在那里),然后浏览器检查清单文件是否更新.如果是,请下载并放置在新版本的缓存中,但这不会自动更新页面(也不会swapCache()),您将不得不再次刷新页面(至少).

有关该主题的更多信息,另请参阅此演示文稿.

Answer 2

使用谷歌浏览器,如果你只是在调试时这样做,有一个简单的解决方法:使用隐身窗口.当您更改缓存中的某些内容时,请关闭隐身窗口(如果您有多个,请确保关闭所有窗口),重新打开它并转到您的应用程序.现在将从clean下载,包括所有已更改的文件.

这是一个轻微的核选项,因为它会破坏你所有存储的数据,但它在整理CSS的过程中对我来说很好.

出于某种原因,使用"清除浏览数据"清除Chrome的页面缓存似乎不起作用.