I have a SPA and accidentally when launching I set cache headers not only for the assets, but also for the main page on the domain (like www.mysite.com).
My JS and CSS assets are versioned and they correctly get a unique filename on build to bust caches, but the problem is, that because my homepage is browser-cached too, the visitor never gets the updated HTML. They just always get the old HTML requesting the old assets.
I have fixed the headers now, but all the users that visited my site previously are getting the old version, even when they click "reload" in browser. I managed to force it when I open DevTools and click "Empty cache and hard reload", but that's not what my users will normally do. So the question is - do I have any chance to force browsers to reload the main page on the domain after the cache headers were set once?
Below are the headers that old visitors get. I would assume that max-age=86400 makes them reload the page the next day but obviously it's not the case, as even people that visited me week ago still get the old version.
access-control-allow-origin: *
cache-control: public, max-age=86400
content-encoding: gzip
content-type: text/html; charset=UTF-8
date: Fri, 21 Aug 2020 09:43:58 GMT
etag: W/"95e-173e97039b2"
last-modified: Thu, 13 Aug 2020 20:08:32 GMT
server: nginx/1.17.3
status: 200
vary: Accept-Encoding
x-content-type-options: nosniff
x-frame-options: SAMEORIGIN
x-powered-by: Express
x-xss-protection: 1; mode=block
Thanks a lot for any advice.
So in the end I managed to fix it by adding a modified etag header. Looks like switching cache-control to no-store and removing the etag as a whole didn't help, but having cache-control: no-store and etag with a different value forced the test Chrome browser to reload.