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

Question

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

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

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

如何找到解决此问题的方法？我可以更改 create-react-app 配置以确保不再发生这种情况吗？

Answer 1

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

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

Answer 2

我确实找到了问题所在：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 的缓存方式有关。

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

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

React app : old version kept in cache until I inspect it

reactjs

service-worker

create-react-app