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

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

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

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

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

---

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

您可能希望从响应的

日期：

标题中检索该信息。不幸的是，如果您正在处理来自第三方服务器的CORS响应，则默认情况下，

Date:

头不可用，只有可用

因此，您要做的第一件事是确保您正在使用的API在其HTTP响应上设置

我不知道您是如何读取web应用程序中的API响应的，但假设您正在使用

fetch（）

获取响应（可能来自或不来自服务人员的缓存），然后将响应作为JSON处理。检查日期：标题的代码可能类似于：

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.
}

const response=wait fetch（'https://api.service.com/resource');
const dateAsString=response.headers.get（'Date'）；
const dateAsMillis=Date.parse（dateAsString）；
//使用dateAsMillis执行一些操作，例如将其与Date.now（）进行比较。
如果（（Date.now（）-dateAsMillis）

您可能希望从响应的

日期：

标题中检索该信息。不幸的是，如果您正在处理来自第三方服务器的CORS响应，则默认情况下，

Date:

头不可用，只有可用

因此，您要做的第一件事是确保您正在使用的API在其HTTP响应上设置

我不知道您是如何读取web应用程序中的API响应的，但假设您正在使用

fetch（）

获取响应（可能来自或不来自服务人员的缓存），然后将响应作为JSON处理。检查日期：标题的代码可能类似于：

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.
}

const response=wait fetch（'https://api.service.com/resource');
const dateAsString=response.headers.get（'Date'）；
const dateAsMillis=Date.parse（dateAsString）；
//使用dateAsMillis执行一些操作，例如将其与Date.now（）进行比较。
如果（（Date.now（）-dateAsMillis）

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