17

The Cache-Control header in my firebase.json does not seem to be working. The max-age value for all files is set to 31536000 (1 year), but when loading the page it is still set to the browser default of 3600 (1 hour).

The firebase.json file seems to abide by the firebase documentation.

{
    "hosting": {
        "public": "public"
    },
    "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
    ],
    "headers": [{
        "source": "**",
        "headers": [{
            "key": "Cache-Control",
            "value": "max-age=31536000"
        }]
    }]
}
deleted
  • 772
  • 1
  • 6
  • 19

2 Answers2

24

According to full page configuration you have to set hosting key first.

This has to work:

{
  "hosting": {
    "public": "app",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "headers": [{
      "source" : "**",
      "headers" : [{
        "key" : "Cache-Control",
        "value" : "max-age=31536000"
      }]
    }]
  }
}
Arnold Gandarillas
  • 3,896
  • 1
  • 30
  • 36
  • I did this for the headers and I have to hard refresh to see my index.html changes – AngularM Mar 31 '17 at 16:29
  • Hi buddy to avoid this issue you can [disable your cache](http://stackoverflow.com/questions/5690269/disabling-chrome-cache-for-website-development) or if you are already in production but you have to do some changes in short periods you can set `max-age=3600` in this way the browser will request new data each hour. – Arnold Gandarillas Mar 31 '17 at 21:46
  • I'm using angular 2 and my aim is to prevent my customers having to hard refresh – AngularM Mar 31 '17 at 22:00
  • When I posted this I was working with react and I had the same issue because I set `max-age=31536000` then I had to change it to `max-age=172800` becaouse I was developing some features yet in this way my clients had access to my new project versions. Of course before that they have to hard refresh in order to get the new `max-age` – Arnold Gandarillas Mar 31 '17 at 22:44
  • 1
    I set max age to 0 and they still have to hard refresh. – AngularM Mar 31 '17 at 22:46
  • 1
    How can I prevent that? – AngularM Mar 31 '17 at 22:46
  • @AngularM You should be using some sort of revisioning script that would append a hash (based on the file content) to each file name so the browser would know what files got changed and would request the new version. Take a look at gulp-rev for example. https://github.com/sindresorhus/gulp-rev – adolfosrs May 10 '19 at 16:34
  • to fully prevent caching, use `no-store, max-age=0` – Abraham Jun 07 '21 at 21:59
  • it's also still caching on my site, is there any other solution? – bastifix Jan 09 '23 at 23:11
1

For those who want to prevent caching, you should use no-cache and max-age=0 together.

The no-store directive will prevent a new resource being cached, but it will not prevent the cache from responding with a non-stale resource that was cached as the result of an earlier request. Setting max-age=0 as well forces the cache to revalidate (clears the cache).

"headers": [{
  "source" : "**",
  "headers" : [{
    "key" : "Cache-Control",
    "value" : "no-store, max-age=0"
  }]
}]
Abraham
  • 12,140
  • 4
  • 56
  • 92