强制 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

您的清单文件也可能被缓存（您可以设置过期标头使其立即过期）。还要记住重新加载顺序：您的页面将首先从 AppCache 加载（如果存在）。 )，然后浏览器检查清单文件是否更新，如果更新，则下载并放入新版本的缓存中，但这不会自动更新页面（swapCache()也不会）。 ，您将必须（至少）再次刷新页面。

另请参阅此演示文稿，了解有关该主题的更多信息。

Answer 2

使用 Google Chrome，如果您只是在调试时执行此操作，有一个简单的解决方法：使用隐身窗口。当您更改缓存中的某些内容时，请关闭隐身窗口（如果有多个窗口，请确保关闭所有窗口），然后重新打开它并转到您的应用程序。现在将从干净的状态下载，包括所有更改的文件。

这是一个有点核选项，因为它会破坏所有存储的数据，但它对我来说在整理 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->选项->选项->高级->网络：离线网络等->立即清除

并查看是否从服务器获取了哪些内容：

• Firefox->网页选项->工具->网络选项卡

Answer 5

为您的清单文件设置 HTTP 标头，

'Cache-Control' to 'no-store'

为 .manifest 添加 Content-Type

'text/cache-manifest'

应该可以做到这一点，否则浏览器将针对您设置的任何缓存默认值缓存清单本身，因此检查清单的请求将检索缓存的副本。

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

您没有说明您正在运行什么服务器，但我对 S3 存储桶中托管的文件执行了此操作，结果成功了，S3 通常会缓存 24 小时。