13

I designed a web app using the Flutter web. I hosted it with Firebase host. But It's not showing changes of my code after deploying to firebase. It's still showing my older version of web app. But I can overcome this problem by clearing cache memory of browser or ctrl+refresh. But I don't want to do this every time I deploy to firebase. How to stop saving my web app in cache memory?

hosted link: https://frcovid19dashboard.web.app

iqfareez
  • 555
  • 7
  • 21
Faslur Rajah
  • 861
  • 2
  • 10
  • 17
  • Thank you so much for your question, this is exactly what I was looking for. And the website is awesome like the progressive design and speed , really beautiful work. – basudev nayak Apr 26 '21 at 06:21

2 Answers2

21

Append a version number to your main.dart file. Every time you do changes that require the browser to clear cash, change the appended version number before you upload changes so the browser knows something has change and it needs to clear the cash. For example:

First Version:

<script src="main.dart.js?version=1" type="application/javascript"></script>

Next time you make changes:

<script src="main.dart.js?version=2" type="application/javascript"></script>

And so on. Check this link.

unbalanced_equation
  • 839
  • 2
  • 8
  • 21
  • 3
    This is not working for me. Is there another approach? – Gustavo Contreiras May 21 '20 at 00:50
  • @GustavoContreiras Try https://stackoverflow.com/a/65110613/13617136 – iqfareez May 10 '21 at 08:36
  • where do i put this? because when i put this and deploy into server it will return error 404 since it cannot detect the js file https://urlname.com/main.dart.js?version =1 – ali Jan 21 '22 at 18:37
  • you add it on the `index.html` file `scriptTag.src = 'main.dart.js' + "?version=" + getRelease();`, Thank you @unbalanced_equation. I had so much headache trying to figure it out why the release wasn't updating and it is such an easy fix. `getRelease()` is a method that I have that gets the release number when the app is deployed. – Rinaldi Segecin Feb 11 '23 at 15:08
  • if you're deploying using nginx you can add a `default.conf.template` file with a `sub_filter` that gets the release number from a Environment Variable and add it to header of the index.html file then make a javascript function querying the header `document.querySelector('meta[name="RELEASE_NAME"]')` but that's another topic. – Rinaldi Segecin Feb 11 '23 at 15:18
5

Another approach would be to prevent caching via HTTP headers. For Firebase Hosting that would be : https://firebase.google.com/docs/hosting/full-config#headers

I guess you could set up something like this inside the site entry in your firebase.json:

"headers": [
  {
    "source": "**",
    "headers": [
      {
        "key": "Cache-Control",
        "value": "no-cache"
      }
    ]
  }
]
klydra
  • 123
  • 1
  • 12