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="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
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.

3 Likes

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