I'm trying to figure out how to properly handle the web browser cache for single page apps.
I have a fairly typical design: several HTML, JS and CSS files implementing the SPA, and a bunch of JSON data that's consumed by the SPA. Problems arise when I want to push an update: I update the static portion of the site and the code that generates the JSON at the same time, but client browsers often have the static portion cached, so old code tries to process the new data and may (depending on changes made) run into problems. (In particular, IE seems more aggressive than Chrome or Firefox about using cached JS without revalidating.)
What's the best way to handle this?
- Make sure my JSON changes are backwards-compatible, and assume browser caches will expire in a reasonable timeframe.
- Embed some sort of version number in both the static JS and the JSON, then execute
window.location.reload(true);if they don't match.
- Figure out the appropriate combination of headers (
no-cacheor whatever; sources vary on how to do this) to ensure that browsers always revalidate all resources on every load, even if it means a few extra round trips to load the site.
- Micro-manage my cache-control and expires headers so that static content expires when I want to push an update.
- Something else?