如何知道服务工作者通过Workbox缓存的响应的日期时间？

Question

在我的应用程序中，用户必须知道上次更新数据的时间。

例如，假设来自Web API的响应缓存如下：

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

在一小时内，响应将来自缓存，如果用户处于脱机状态，则响应时间可能会更长。

我如何知道原始响应日期/时间？

Answer 1

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

所以你要做的第一件事是确保你正在使用的API在其HTTP响应上设置Access-Control-Expose-Headers: Date。

我不知道您是如何在Web应用程序中阅读API响应的，但我们假设您正在使用fetch()获取响应（可能来自服务工作者的缓存，也可能不来自服务工作者的缓存），然后将响应处理为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.
}