Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why does Browser still sends request for cache-control public with max-age?

I have Amazon S3 objects, and for each object, I have set

Cache-Control: public, max-age=3600000 

That is roughly 41 days.

And I have Amazon CloudFront Distribution set with Minimum TTL also with 3600000.

This is the first request after clearing cache.

GET /1.0.8/web-atoms.js HTTP/1.1 Host: d3bhjcyci8s9i2.cloudfront.net Connection: keep-alive Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 User-Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.57 Safari/537.36 Accept-Encoding: gzip,deflate,sdch Accept-Language: en-US,en;q=0.8 

And Response is

HTTP/1.1 200 OK Content-Type: application/x-javascript Content-Length: 226802 Connection: keep-alive Date: Wed, 28 Aug 2013 10:37:38 GMT Cache-Control: public, max-age=3600000 Last-Modified: Wed, 28 Aug 2013 10:36:42 GMT ETag: "124752e0d85461a16e76fbdef2e84fb9" Accept-Ranges: bytes Server: AmazonS3 Age: 342557 Via: 1.0 6eb330235ca3971f6142a5f789cbc988.cloudfront.net (CloudFront) X-Cache: Hit from cloudfront X-Amz-Cf-Id: 92Q2uDA4KizhPk4TludKpwP6Q6uEaKRV0ls9P_TIr11c8GQpTuSfhw== 

Even while Amazon clearly sends Cache-Control, Chrome still makes second request instead of reading it from Cache.

GET /1.0.8/web-atoms.js HTTP/1.1 Host: d3bhjcyci8s9i2.cloudfront.net Connection: keep-alive Cache-Control: max-age=0 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 User-Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.57 Safari/537.36 Accept-Encoding: gzip,deflate,sdch Accept-Language: en-US,en;q=0.8 If-None-Match: "124752e0d85461a16e76fbdef2e84fb9" If-Modified-Since: Wed, 28 Aug 2013 10:36:42 GMT 

Question: Why does chrome makes second request?

Expires This behavior changes when I put an explicit Expires attribute in headers. Browser will not send subsequent request for Expires header, but for cache-control public, it does send it. My all S3 objects will never change, they are immutable, when we change file, we put them as new object with new URL.

In Page Script Reference Chrome makes subsequent requests only sometimes, I did this test by actually typing URL in browser. When script is referenced by HTML page, for few subsequent requests chrome loads cached scripts, but once again after sometime, once in a while it does send request to server. There is no Disk Size issue here, Chrome has sufficient cache space.

Problem is we get charged for every request, and I want S3 objects to be cached forever, and should be loaded from Cache and should never connect to server back.

like image 292
Akash Kava Avatar asked Sep 01 '13 09:09

Akash Kava


People also ask

What is Cache-Control max-age?

Cache-Control: Max-AgeAfter expiring, a browser must refresh its version of the resource by sending another request to a server. For example, cache-control: max-age=120 means that the returned resource is valid for 120 seconds, after which the browser has to request a newer version.

How do I change my Cache-Control max-age?

Cache-Control: max-age=<seconds> This directive tells the browser or intermediary cache how long the response can be used from the time it was requested. A max-age of 3600 means that the response can be used for the next 60 minutes before it needs to fetch a new response from the origin server.

How do I stop my browser from caching?

Here's how... When you're in Google Chrome, click on View, then select Developer, then Developer Tools. Alternatively, you can right click on a page in Chrome, then click Inspect. Click on the Network tab, then check the box to Disable cache.

What happens if you don't set Cache-Control header?

Without the cache control header the browser requests the resource every time it loads a new(?) page.


2 Answers

When you press F5 in Chrome, it will always send requests to the server. These will be made with the Cache-Control:max-age=0 header. The server will usually respond with a 304 (Not Changed) status code.

When you press Ctrl+F5 or Shift+F5, the same requests are performed, but with the Cache-Control:no-cache header, thus forcing the server to send an uncached version, usually with a 200 (OK) status code.

If you want to make sure that you're utilizing the local browser cache, simply press Enter in the address bar.

like image 95
Oliver Salzburg Avatar answered Oct 12 '22 04:10

Oliver Salzburg


If the HTTP Response contains the etag entry, the conditional request will always be made. ETag is a cache validator tag. The client will always send the etag to the server to see if the element has been modified.

like image 42
woolagaroo Avatar answered Oct 12 '22 04:10

woolagaroo