Force mobile browser to skip cache when browser is reactivated

user_1327867 0
Viewed 205

I've got a single-page app that I'm updating several times a day. In spite of aggressive cache controls on the page, mobile users (especially Safari users) are frequently several days out of date.

I know for a fact that the page is being reloaded, ie, that my startup JS is being executed correctly. So browsers like mobile Safari are simply loading the page from cache despite my headers and meta tags, probably when the browser itself is reactivated after being closed.

How can I prevent this behavior? I'd rather not resort to forcibly calling location.reload(), as that gets complicated (need some timestamp in local storage), could disrupt the user, and could result in slower perceived loading times.

I'm already using aggressive cache prevention measures:

<Files index.html>
Header set Cache-Control "no-cache, max-age=0, must-revalidate"
Header set Pragma "no-cache"
</files>

<!-- srsly plz dont cache this page kthxbye -->
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
mobile-safari browser-cache
1 Answers

Why Safari isn't reloading over the network I don't know, but you might try adding location.reload() to a listener on the window's focus event. If the cache is still valid, it should reload basically instantly, and if it's not it'll pull the fresh data.

window.addEventListener("focus", () => {
  // other logic here, perhaps to restrict how often it reloads
  location.reload();
})
user_122162630
Related