我如何知道服务人员通过 Workbox 缓存的响应的日期时间？答案

【问题标题】：How can I know the datetime of a response cached by a service worker through Workbox?我如何知道服务人员通过 Workbox 缓存的响应的日期时间？
【发布时间】：2019-02-20 15:19:52
【问题描述】：

在我的应用程序中，让用户知道上次更新数据的时间很重要。

例如，假设来自 Web API 的响应是这样缓存的：

workbox.routing.registerRoute(
  /https:\/\/api\.service\.com\/resource.*/,
  workbox.strategies.cacheFirst({
    cacheName: 'resource',
    plugins: [
      new workbox.expiration.Plugin({
        maxAgeSeconds: ONE_HOUR,
      }),
    ]
  }),
)

在一小时内，响应会来自缓存，如果用户离线，响应时间会更长。

我如何知道原始回复日期/时间？

【问题讨论】：

标签： caching service-worker progressive-web-apps workbox

【解决方案1】：

您可能希望从响应的 Date: 标头中检索该信息。不幸的是，如果您正在处理来自第三方服务器的 CORS 响应，则默认情况下 Date: 标头不可用 - 只有 simple response headers 可用。

因此，您要做的第一件事就是确保您使用的 API 在其 HTTP 响应中设置了 Access-Control-Expose-Headers: Date。

我不知道您是如何在 Web 应用程序中读取 API 响应的，但我们假设您使用 fetch() 来获取响应（可能来自也可能不来自 service worker 的缓存）和然后将响应处理为 JSON。检查Date: 标头的代码可能类似于：

const response = await fetch('https://api.service.com/resource');
const dateAsString = response.headers.get('Date');
const dateAsMillis = Date.parse(dateAsString);

// Do something with dateAsMillis, like comparing it to Date.now().
if ((Date.now() - dateAsMillis) < SOME_THRESHOLD) {
  const json = await response.json();
  // Etc.
}

【讨论】：

所以如果我理解得很好，一般来说，“日期”标头，可能还有任何标头，都会被保留，而不仅仅是响应正文？
当您从缓存存储中保存/读取响应时，通常在运行时通过 JavaScript 可用的所有响应标头都将保留并重新创建。棘手的是，一般有哪些标头可用的规则。就像我提到的，这是默认情况下 CORS 响应的有限列表。 fetch.spec.whatwg.org/…