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()），您将不得不再次刷新页面（至少）。

有关该主题的更多信息，另请参阅this presentation。

Answer 2

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

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

出于某种原因，使用“清除浏览数据”清除Chrome的网页缓存似乎不起作用。

Answer 3

“你需要更改缓存清单文件本身。这可以像更改单个字符一样简单”，这对我有用，谢谢！

Answer 4

我挣扎了一段时间。对我来说，关键是通过nginx获取mime类型和缓存标题。

/etc/nginx/mime.types中的

：

text/cache-manifest                   manifest appcache;

/etc/nginx/nginx.conf中的

：

      # If the file exists as a static file serve it directly
      if (-f $request_filename) {
        expires -1;
        break;
      }

expires -1行导致缓存头设置为no-cache。

另外，要清除我使用的Firefox 23中的缓存：

Firefox-＆gt;选项 - ＆gt;选项 - ＆gt;高级 - ＆gt;网络：离线网络等 - ＆gt;立即清除

要查看从服务器获取的内容：

Firefox-＆gt;网络选项 - ＆gt;工具 - ＆gt;网络标签

Answer 5

为您的清单文件设置

的HTTP标头

'Cache-Control' to 'no-store'

为.manifest添加

的Content-Type

'text/cache-manifest'

应该这样做，否则浏览器将为您设置的任何缓存默认缓存清单本身，因此检查清单的请求将检索缓存副本。

之后，然后更改清单文件中的字符，下一个请求应该获取一个新的清单。

你没有说你正在运行什么服务器，但是我为从S3存储桶托管的文件做了这个，并且这样做了，S3通常会缓存24小时。

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

5 个答案: