CODEWITHSUNDEEP
htmlcssreactjsfirebasefirebase-hosting
elfilosof87
elfilosof87

Reputation: 13

Force cache clearance on user browser upon new deploy firebase hosting

I have used create-react-app for the front end scripts and using firebase hosting for deployment. Every time I update the CSS and other HTML and deploy them to the hosting, the changed are not reflected on the domain unless I force clear the cache. How can I automatically clear the cache on the browser every time I deploy to the hosting?

Upvotes: 1

Views: 608

Answers (1)

Frank van Puffelen
Frank van Puffelen

Reputation: 599571

The caching happens in your browser, and the browser typically does this based on the caching headers that you tell Firebase Hosting to send back. If you set these headers too short, you'll end up reloading files that haven't been modified, wasting both your and your users' bandwidth. If you set the headers too long, users may end up seeing stale content, as you're discovering.

You can either:

  • Find a nice middle ground of users seeing the latest content and minimizing bandwidth usage.
  • Tell your users to reload the page when there is a change.
  • Apply some form of fingerprinting on your URLs, which means that content generates unique URL, so new content will be served under a new URL.
  • Turn your app into a PWA, so that you can completely control what content gets loaded from the cache and what is loaded from the network. See When and how does a PWA update itself?

Upvotes: 1

Related Questions