使用cache put API时资源的time cached值显示异常

我之前也踩过这个坑！你看到的1969年那个奇怪时间，其实是浏览器在找不到有效响应时间时的默认 fallback 值——Unix纪元时间（时间戳0），对应到你的本地时区就显示成了12/31/1969, 3:59:59 PM。

根源在于：浏览器缓存面板里的「time cached」字段，完全依赖响应的Date头来生成。当你手动创建Response对象时，如果没有显式设置符合HTTP规范的Date头，浏览器就无法确定这个响应的生成时间，只能用时间戳0来填充。

你之前尝试添加Date头但没生效，大概率是因为格式不对——HTTP要求Date头的值必须是RFC 7231标准的UTC时间字符串，比如Wed, 21 Oct 2015 07:28:00 GMT，不能直接传Date对象或者其他格式的字符串。

修改代码，给自定义Response加上格式正确的Date头就行，直接用new Date().toUTCString()生成符合要求的字符串：

const cache = await caches.open('my-cache');
const headers = new Headers();
headers.append('Content-type', 'application/javascript; charset=utf-8');
// 关键：添加符合HTTP规范的Date头
headers.append('Date', new Date().toUTCString());

const response = new Response('alert("hi!");', {
  status: 200,
  statusText: 'OK',
  headers: headers
});
cache.put('hello.js', response);

或者更简洁的写法，直接在Response的初始化参数里定义headers：

const cache = await caches.open('my-cache');
const response = new Response('alert("hi!");', {
  status: 200,
  statusText: 'OK',
  headers: {
    'Content-type': 'application/javascript; charset=utf-8',
    'Date': new Date().toUTCString()
  }
});
cache.put('hello.js', response);

这样设置后，再去看缓存面板，「time cached」就会显示正确的缓存时间了。

补充一句：你之前试的Age、Cache-Control这些头是用来控制缓存策略的，和「time cached」的显示没有直接关系，这个字段只认Date头哦。

内容的提问来源于stack exchange，提问作者Miya