时间戳

首页 > 解决方案 > ReactJS 单页应用程序。无法在 Chrome 上获取更新版本

reactjs - ReactJS 单页应用程序。无法在 Chrome 上获取更新版本

问题描述

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

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

在 create-react-app 和 registerServiceWorker.js 上附加重新加载通知

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

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

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

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

标签： reactjsgoogle-chromesingle-page-applicationservice-workerpage-refresh

解决方案

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

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

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

我构建了一个 python 程序，它会在上传到 S3 时自动处理这个问题。它根据文件类型设置 HTTP 缓存头参数，删除旧文件，并可选择维护旧版本。

另请参阅：在管理缓存的同时使用 CloudFront 在 S3 上部署 React 应用程序的步骤？

推荐阅读