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

问题描述 投票:0回答:1

我们有一个基于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);
});

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

reactjs google-chrome single-page-application service-worker page-refresh
1个回答
1
投票

要部署两种不同的文件:

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

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

我建立了a python program,它将自动处理上传到S3。它根据文件类型设置HTTP缓存头参数,删除旧文件,并可选择维护旧版本。

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

© www.soinside.com 2019 - 2024. All rights reserved.