React 应用程序：旧版本保留在缓存中，直到我检查它

Question

我使用

create-react-app

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

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

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

我怎样才能找到解决这个问题的方法？我可以更改

create-react-app

配置以确保这种情况不再发生吗？

Answer 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>

最终与服务人员无关。它只与

index.html

的缓存方式有关。

Answer 2

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

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

Answer 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，但无论如何都应该有一个单独的位置规则来服务这些元素。

Answer 4

抱歉，我对此不确定，但我知道更新 package.json 文件中的版本应该可以完成这项工作。不然这个版本属性有什么用？

来自：

  "version": "1.0.0",

致：

  "version": "2.0.0",

如有错误，请指正。不要投反对票。

它对我有用。