17

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

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

这肯定不会这么难。如何说服浏览器重新请求某些缓存文件？

4

5 回答 5

13

要强制下载任何新的（或更改的）文件，您必须更新清单文件（添加版本号注释或任何更改都可以）。可能发生的情况是您遇到了错误。最常见的情况是您可能没有使用正确的 mime 类型 ( text/cache-manifest) 提供清单。您是否正确配置了服务器？检查这一点的最简单方法是在 Chrome 中打开页面并查看控制台和 AppCache 下的资源选项卡，看看是否有错误（它会抱怨文件服务不正确。您也可以使用curl -I 命令：

curl -I $manifest_file_URL

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

另请参阅此演示文稿以获取有关该主题的更多信息。

于 2011-03-26T10:38:26.530 回答
7

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

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

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

于 2012-11-27T11:17:30.837 回答
2

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

于 2012-03-07T13:45:50.843 回答
1

我为此挣扎了一段时间。对我来说，关键是通过 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->Web 选项->工具->网络选项卡
于 2013-09-19T11:34:11.103 回答
1

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

'Cache-Control' to 'no-store'

为 .manifest 添加一个 Content-Type

'text/cache-manifest'

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

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

您没有说您正在运行什么服务器，但我为托管在 S3 存储桶外的文件执行了此操作，并且成功了，S3 通常缓存 24 小时。

于 2016-08-10T02:19:33.587 回答