CODEWITHSUNDEEP
azureazure-web-app-service
ROODAY
ROODAY

Reputation: 832

How to invalidate browser cache for React app hosted through Azure App Service?

I have a react web app that's hosted through Azure App Service and it gets updated fairly frequently, however the browsers accessing the app seem to be caching the javascript/html files fairly aggressively, and so I have to constantly hard refresh/empty cache, as well as tell users of the app to do the same. I'd like to avoid end users having to manually clear their cache whenever a change goes out, is there a way for App Service to tell clients to invalidate their cache? I tried looking up how to set the Cache-Control header for App Service but it doesn't seem possible, does the app need to be behind an Application Gateway or an Azure CDN instance in order to do this? Is there a recommended approach for forcing clients to pull down the latest changes when a deployment goes through?

Upvotes: 1

Views: 2136

Answers (1)

DaveF
DaveF

Reputation: 419

Whilst you can control CDN caching by purging the cache on deployment, this won't clear any local browser cache.

In order to solve this problem without disabling caching entirely, you need to implement some logic in your front end to cache bust the local cache.

The basic principle is as follows:

  • Deploy a publicly accessible file which contains the version number of the most recent deployed version.
  • In your front end code (javascript for example) fetch this file and compare the version number with the version embedded in the front end files. If the versions differ, delete the local cache and force the page to reload.

There are few libraries out there that help. For example, if your front-end is a React app, you could consider using react-cache-buster

Upvotes: 0

Related Questions