React app：旧版本保存在缓存中，直到我检查它答案

【问题标题】：React app : old version kept in cache until I inspect itReact app：旧版本保存在缓存中，直到我检查它
【发布时间】：2017-12-12 14:05:08
【问题描述】：

我使用 create-react-app 开始开发 React 应用程序。默认情况下，它使用服务工作者。我也碰巧使用 https 为我的生产应用程序提供服务。

事实证明，使用此配置，我的浏览器无法获得我部署的新版本。即使我强制刷新，它也会继续重新加载旧版本。我可以让它加载最新版本的唯一方法是检查页面（使用 Chrome）。然后，当我强制刷新时，会加载最新版本。

我已经禁用了服务人员，因为它似乎是罪魁祸首，但我一直遇到这个问题。我不能要求我的用户每个人都在他们的浏览器中打开检查器以获取最新版本。

我怎样才能知道如何解决这个问题？是否可以更改 create-react-app 配置以确保不再发生这种情况？

【问题讨论】：

您的托管平台为您的 service-worker.js 文件设置了哪些缓存标头？
cache-control:public, max-age=86400。据我了解，这就是服务人员如此粘人的原因。我也想知道服务人员应该做什么。我认为它应该有助于更顺利地将应用更新到最新版本？

标签： reactjs service-worker create-react-app

【解决方案1】：

我确实发现了问题所在：index.html 被缓存了，所以它指向的旧 js 文件也被缓存了。

我解决它的方法是将此配置添加到应用程序根目录下的.htaccess 文件中（尽管通过其他方式配置 apache 也可能有效）：

<FilesMatch "\.(html)$">
  FileETag None
  <IfModule mod_headers.c>
     Header unset ETag
     Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
     Header set Pragma "no-cache"
     Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
  </IfModule>
</FilesMatch>

最后，它与 service worker 无关。它只与缓存 index.html 的方式有关。

【讨论】：

【解决方案2】：

似乎服务器设置缓存标头的方式告诉浏览器不要像您希望的那样快速更新 service-worker.js 文件。 SW.js 文件应具有 Expires: 0、Cache-Control: no-store、no-cache 标头。请注意，标头由为网站提供服务的服务器设置，而不是 CRA 或用于创建应用的任何其他构建工具。

有关 Service Worker 本身的介绍，请在此处查看 Google 的帖子 https://developers.google.com/web/fundamentals/primers/service-workers/

【讨论】：

【解决方案3】：

对于使用 nginx 为其 react 应用程序提供服务的人：

location / {
    add_header Cache-Control "private, no-store, no-cache";
}

（参见http://nginx.org/en/docs/http/ngx_http_headers_module.html#add_header 中的语法）。

JS 和 CSS 通常是版本化的，但是 html 应该使用 no-store, no-cache 来加载最新的。确保配置中与 html 匹配的后续规则不会覆盖 Cache-Control。

还要确保您确实缓存了 .js、.css、.svg 等静态元素，但无论如何都应该有一个单独的位置规则来服务这些元素。

【讨论】：

如果您使用此选项，则不会缓存任何内容。
如果这是您在 nginx 配置中放入的全部内容，那么不，不会缓存任何内容。但是，如果您只将此规则应用于核心 html 文件并为 js/css/images 添加 /static 规则，那么这些文件将被缓存，这些文件将是 CRA 应用程序的大部分内容，但正确的版本将总是作为 html 文件主要只是一个版本列表，用于加载 js 和 css 文件。
谢谢 akaltar - 我会试一试的。我对 nginx 很陌生。