I’m searching for some insight in how Netlify invalidates browser caches on builds. I’ve seen the issue come up pretty regularly and I was hoping I could find a solution.
It’s fairly simple and I’m sure everyone has seen it. You push an update, it builds, and you’re served a cached version… Now I have no issue with Shift + Refreshing or knowing it works fine outside of my pesky local cache, but I frequently get alerted by (nontechnical) members across the broader team. I often tell them how to refresh it, but it is disheartening when a higher-up sees outdated information because the site is cached in their browser. Is there anything I can be doing to force cache invalidation? In other environments, I’ve solved it with version numbers on site assets (CSS, JS).
Any insight or ideas are appreciated. I love the platform and I have a feeling I’m just missing something
From what I know, it’s probably the response headers that Netlify adds, especially this: cache-control: public, max-age=0, must-revalidate. I have never faced issue of Netlify cache. Do you use service workers that’s caching the data?
I did have gatsby-plugin-offline enabled. Reading Caching Static Sites | Gatsby, it seems like I could keep the plugin enabled, if I made sure the configuration and headers were right. I’ll do some research and report back for anyone searching later
With all the benefits, this is a downside to service workers. If the cache is not managed properly, your content would probably never update. You should be able to see if your service worker updates the URLs to cache with the appropriate versions with each new build and you can also add self.skipWaiting(); to your service worker, which would install the new service worker as soon as a new one is detected. As the new service worker gets installed, your visitors will see the new webpage from subsequent reloads.
