How to force browser to cache for `max-age` Cache-Control header?

I implemented logging inside my Worker. That works great. But when the user reloads the webpage, the browser makes a new request for the same page.

That’s an issue because it adds extra noise to my data. Ideally, I want the browser to only check back on the Cloudflare edge after max-age expired. But for as long as that time hasn’t passed, the content should be considered fresh.

These are the headers that my pages return:

HTTP/2 200 OK
date: Mon, 02 Mar 2020 18:08:49 GMT
content-type: text/html; charset=utf-8
cf-ray: 56dd10b22a2a2b86-AMS
age: 2853
cache-control: public, max-age=120
vary: Accept-Encoding
cf-cache-status: HIT
alt-svc: h3-27=":443"; ma=86400, h3-25=":443"; ma=86400, h3-24=":443"; ma=86400, h3-23=":443"; ma=86400
expect-ct: max-age=604800, report-uri=""
server: cloudflare
content-encoding: br

The problem likely is that max-age is the maximum amount of time a resource is considered fresh (mdn).

Ideally I’d have my Worker create a ‘minimum’ time too. But I don’t know how. Any ideas? :slightly_smiling_face:

That’s normal browser behavior. A reload is a new fetch.

Screen Shot 2020-03-02 at 10.33.04 AM

Cache-Control immutable will give you the behaviour you are looking for, but with support in Firefox and Safari only. It’s on the MDN page you linked to.


Thanks for the replies!

Unfortunately with immutable HTML pages are still requested with repeat views, although other assets not.

I also tried to use the Referer header to try and locate repeated views, but that one isn’t updated when a page refreshes.

So ultimately I settled on just accepting the situation. :slightly_smiling_face:

1 Like