I am using CloudFront with fixed cache time (say 1 day) for a particular static resource. At the same time, I want the browser to cache that only for one hour, that's why the response is:
cache-control: private; max-age=3600
However, CloudFront is always adding a response header:
age: 35
Which is the number of seconds that has been cached on the proxy (CloudFront in this case).
Reading https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching really makes sense and there's no mention of age header.
What is possible is that header has value of say 24678 seconds, and the resource would be considered expired.
I just want to confirm that that age header has no effect on the local browser cache. Am I correct?
Unfortunately after a couple of hours of testing and experiments, it doesn't seem possible to achieve what I wanted - cache a resource in CloudFront for long period (say 1 day) but make this cached in the browser for 30 mins.
The age header affects the expiration of a HTTP resource.
E.g. if you have cache-control: private; max-age=3600 and you try to fetch a resource from CloudFront with age: 4000 then this resource is considered already expired by the browser and next time it has to be re-downloaded again.
EDIT: October 2021
Good news, this year AWS introduced Cloudfront Functions which exactly what we need in this case - to modify the response header that are sent to the viewer.
The two headers I modify are "date" and delete the "age" and "expiry" headers. It seems that after setting the "date" header to the current date and time, the "age" header is not added anymore (but I delete it explicitly):
function handler(event) {
var response = event.response;
var headers = response.headers;
// Set current date
headers['date'] = {value: (new Date()).toUTCString()};
delete headers['expires'];
delete headers['age'];
return response;
}