Proper cache headers to use to clear browsers local cache?

We have a lightbox/modal that pops up for users on a web page. We’re running into an issue where when a change is made to the lightbox and we clear the cache, the new changes do not appear by simply refreshing the page; you must hard refresh the page for the changes to appear.

When a change is made to the lightbox in our backend (size, settings, colors, fonts, etc) we are using the API endpoint to purge the cache via: api.cloudflare.com/client/v4/zones/key/purge_cache

We have no cache headers set for this file, and are simply relying on detecting a change has been made and clearing the cloudflare cache via the API.

How do we force the file to clear in the users local browser cache though? We obviously cannot tell users to hard refresh to see the latest changes.

Once you’ve set something to cache at the browser, you can’t clear it. It’s already there and the browser won’t ask your site for it again until it’s cleared from the cache.

1 Like

Got it, so there is no way to tell the users local browser cache that a change has been made and a new file should be retrieved without the user having to hard refresh the page? That would seem odd to me that there would be no solution for this as it seems like a pretty common use case where someone would be constantly served an old file and not know that they needed to hard refresh their browser to get the newest file.

It isn’t once you think about it. You’ve already told them to keep using it for a month because you tagged the file with a cache expiration, so they’re just doing what you told them to. Their browser looks at the file, sees it’s still good, so it won’t ask again.

Only if you don’t plan ahead. And that’s why HSTS (a separate issue) is so scary for some people.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.