Our application is built on ReactJS and deployed using S3 and CloudFront. We are experiencing an issue where clients often need to perform a hard refresh of the web app to access the latest Single Page Application (SPA).
In order to address this problem, I came across an article that suggested a solution:
Append reload notice on create-react-app & registerServiceWorker.js
The method described in the article triggers an event called 'newContentAvailable' in Firefox, Chrome, and Safari browsers. When this event occurs, the code attempts to reload the updated version with window.location.reload(true). While this successfully updates Firefox and Safari, Chrome still displays the older version.
I have tried various approaches to reloading in Chrome without success. During my search for a solution, I found the following code snippet:
$.ajax({
url: window.location.href,
headers: {
"Pragma": "no-cache",
"Expires": -1,
"Cache-Control": "no-cache"
}
}).done(function () {
window.location.reload(true);
});
I am uncertain about what mistake I might be making here. Any assistance would be greatly appreciated.