我们有一个基于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);
});
我不确定我在这里做错了什么。请帮忙。
要部署两种不同的文件:
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?