Why isn't Chrome caching responses, even when cache-control header is present?

The server returns HTTP status code 304 which means to tell browser that its cache is still valid, and it should use it.

Quote from https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching:"When a validation request is made, the server can either ignore the validation request and response with a normal 200 OK, or it can return 304 Not Modified (with an empty body) to instruct the browser to use its cached copy. The latter response can also include headers that update the expiration time of the cached document"

When you set cache-control: max-age=... you are saying to the requester that is safe to cache the resource for this long.

But its up to each browser (or applications in general) to decide when to actually cache. Mobile browsers may only cache small resources and desktop browsers may as well do the opposite.

Given your example in Firefox Developer Edition 80.0b5 after some reloads the page started to cache, changing the request cache-control to if-modified-since. This means the browser have the resource cached but will query the server for the resource just to check if it still up-to-date. If it is, the server (or some intermediary network router) will just return a 304 response with no actual content, which is exactly the case you showed:

But when I hit enter in the URL bar or when I use the navigation buttons, the cache is used without any actual request:

It's important to add that the cache-control is a hint to just not the actual requester: intermediaries will also use this informations to cache responses and make next requests load faster. And that even if the main resource (the html page) is cached, all assets linked in the page have their own cache-control tag.

The "transferred" column on dev-tools seems to show better if the resource was effectively cached locally or not: