How to set Http Caching Headers to respect File Modifications

by FalkH   Last Updated September 11, 2019 09:00 AM - source

I want to achieve that browsers check the ETag of static files (images, styles, scripts) on each page-load and then decide whether to use the cached version or load the new one from the server.

In theory, i thought, ETags are made especially for this purpose.

In practice it's not working. At least not as expected.

simple nginx configuration

location ~* \.(js|jpg|png|css)$ {
  add_header Cache-Control "must-revalidate";
  etag on;

Checking with curl, tells me that the ETag is changed on every file-change and the headers are sent as expected.

HTTP/2 200 
server: nginx
date: Wed, 11 Sep 2019 08:08:10 GMT
content-type: text/css
content-length: 359249
last-modified: Wed, 11 Sep 2019 07:24:43 GMT
vary: Accept-Encoding
etag: "5d78a13b-57b51"
cache-control: must-revalidate
accept-ranges: bytes

Testing with curl and appropriate if-* headers, nginx sends a 304 response

HTTP/2 304 
server: nginx
date: Wed, 11 Sep 2019 08:08:18 GMT
last-modified: Wed, 11 Sep 2019 07:24:43 GMT
etag: "5d78a13b-57b51"
cache-control: must-revalidate, max-age=0

When loading the page in a browser, Firefox and Chrome don't request the server and always use the cached version of the file. Whether or not i change the contents or the timestamp of the file. :(

I'd expect the Browsers to make request on each Page-Load and nginx to respond with 304.

May be i misunderstood the docs about ETag or Cache-Control. But I've no clue what is wrong and how to make it work as expected.

Related Questions

CDN: Synchronizing cache across edge machines

Updated September 21, 2018 02:00 AM