缓存存储API，无法获取头

Question

I would like to a check for max-age so I remove items from cache when they get old, but I can't get my own header back for some reason.

  export function cacheResponse(url, response) {
          caches.open('my-cache').then(function(cache) {
            cache.put(url, new Response(JSON.stringify(response), {
              headers: {
                'Cache-Control': 'max-age=1',
                'Content-Type': 'application/json;charset=UTF-8'
              }
            }));
          });
        }

cacheResponse('/hello', {hello: "world"})

I can see this working in the Application tab in chrome and I can see those 2 headers in the preview, but when I pull the item back out the headers object is null.

cache.match(url).then(async function(object) {
  console.log(object.headers) // null
  var body = await object.clone().json(); // {hello: "world"}
})

The object looks like this

object: Response
body: ReadableStream
bodyUsed: false
headers: Headers
__proto__: Headers
ok: true
redirected: false
status: 200
statusText: ""
type: "default"
url: ""

Seems like I should be able to lookup the headers from calling match() no?

Answer 1

That should work; you should be able to call response.headers.get('cache-control') to retrieve the value (assuming this is a same-origin response).

Here's a snippet of code that I just tested which worked when run in the JS console:

async function test() {
  const constructedResponse = new Response('test', {
    headers: {'cache-control': 'max-age=1'}
  });

  const cache = await caches.open('test');

  cache.put('/test', constructedResponse);

  const matchedResponse = await cache.match('/test');

  console.log(`cache-control: ${matchedResponse.headers.get('cache-control')}`);
}