The user will be stuck with the service worker cache forever if the tab is never closed. If your app is registering a service-worker, then the service worker cache will be invalidated only if the user opens the site in a new tab.Browsers tend to ignore cache validation some times if the site is refreshed in the same tab - if the user pins the tab, there's a good chance the site will be loaded from browser cache even if the server cache is cleared.Here are some of the gotchas with browser caching.

With cache headers and with build tools like webpack generating unique chunks on each build, it's a becoming a bit easier to manage, but still, it's not without pitfalls. Since we don't have control over the user's browser, clearing cache in the user's browser has always been a bit of a struggle in the past. When a site is loaded for the first time in the user's browser, the browser decides to cache some resources (mostly assets like images, js and css) locally and the next time the user visits the same site, the browser serves the resources from the local cache. Invalidating server cache is quite straight forward as we have control over our server and on each new deploy, we could either automatically or manually clear the old cache.īrowser caching: Browsers also cache the resources in their own way. There's a lot more to this - CDN, origin servers, edge servers, etc but we'll not go into all that. Second time onwards, the resources are served from the server cache. Server caching: Web servers cache the resources when they are requested for the first time. But invalidating the cache of a web app that's saved to the home screen is even harder. Invalidating the cache of a web app that's loaded in the browser is hard. But the strategy will work with any web application/framework.Īs great as caching is - cache invalidation has been a struggle for a long time now. Note: The examples and explanations in this post are React based. Invalidate cache and hard reload the app when there's a version mismatch. TL DR - SemVer your app and generate a meta.json file on each build that won't be cached by the browser.

Google chrome clear cache forever