11

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
  • 682
  • 5
  • 19

1 Answers1

18

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

This have to work:

{
  "hosting": {
    "public": "app",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "headers": [{
      "source" : "**",
      "headers" : [{
        "key" : "Cache-Control",
        "value" : "max-age=31536000"
      }]
    }]
  }
}
Arnold Gandarillas
  • 3,279
  • 24
  • 35
  • 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