ReactJS 单页应用程序。无法在 Chrome 获得更新版本

Question

我们有一个基于 onReactJS 构建的应用程序，并使用 S3 和 CloudFront 进行部署。我们经常遇到客户需要硬刷新 Web 应用程序才能获得最新的 SPA 应用程序的问题。

为了解决这个问题，我看到了以下文章。

Append reload notice on create-react-app & registerServiceWorker.js

本文中的方法成功地在所有三个浏览器（即 FF、Chrome 和 Safari）上引发了一个名为 'newContentAvailable' 的事件。引发此事件时，逻辑会尝试使用 window.location.reload(true) 重新加载更新版本。这会成功更新 FF 和 Safari，但 Chromes 仍然使用旧版本。

我曾尝试使用不同的方法在 Chrome 中重新加载，但没有成功。我在搜索这个问题时遇到了以下代码

$.ajax({
    url: window.location.href,
    headers: {
        "Pragma": "no-cache",
        "Expires": -1,
        "Cache-Control": "no-cache"
    }
}).done(function () {
    window.location.reload(true);
});

我不确定我做错了什么。请帮忙。

Answer 1

有两种不同类型的文件要部署：

浏览器不应缓存的常见文件，例如index.html
使用散列键构建文件，例如18.a7e57db0.chunk.js，可以安全缓存，因为对源的更改会产生新的构建文件

要设置缓存 HTTP headers，您可以使用 AWS S3 CLI 工具或其他 API 工具，例如 python boto3。通常，您希望浏览器在每次调用重新加载时重新加载公共文件，但要避免对不会更改的文件（即具有哈希键的文件）进行任何不必要的流量。

我构建了 a python program，它将在上传到 S3 时自动处理此问题。它根据文件类型设置 HTTP 缓存 header 参数，删除旧文件，并可选择维护旧版本。

另见：Steps to deploy a React app on S3 with CloudFront while managing caching?

ReactJS 单页应用程序。无法在 Chrome 获得更新版本

ReactJS single page application. Unable to get the updated version on Chrome

google-chrome

page-refresh

single-page-application

reactjs

service-worker