Vue PWA：检查响应是否来自缓存以及它的年龄答案

【问题标题】：Vue PWA: Check if response was from cache and how old it isVue PWA：检查响应是否来自缓存以及它的年龄
【发布时间】：2021-03-05 11:53:43
【问题描述】：

我正在为我的站点使用 vue-pwa，并且目前正在对我在站点内部调用的 API 使用 NetworkFirst 策略。我现在想以某种方式检测我从 API 收到的响应是否被服务工作者缓存（在这种情况下，我想知道缓存的响应有多长时间）或者请求是否被正常获取。目标是在用户查看可能过时的内容时显示警告（响应是从缓存中加载的并且超过几个小时）

这是我目前的sw.js

self.addEventListener('message', (e) => {
  if (!e.data) {
    return
  }

  switch (e.data) {
    case 'skipWaiting':
      self.skipWaiting()
      break
    default:
      break
  }
})

workbox.core.clientsClaim()

self.__precacheManifest = [].concat(self.__precacheManifest || [])
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});

workbox.routing.registerRoute(/^https:\/\/some.api.here.com\//, new workbox.strategies.NetworkFirst(), 'GET');

【问题讨论】：

标签： javascript vue.js progressive-web-apps service-worker workbox

【解决方案1】：

首先，在您的 API 中使用正确的 CORS headers 很重要（如果它位于与网站不同的来源上）。为了得到 full 响应而不是 opaque responses，这是必要的。

现在要获取缓存项的时间，您必须从缓存中访问 Response 对象。

Workbox 缓存的每个资源都可以作为Cache 中的一个键作为Response 对象找到。

找到您要查找的特定资源的响应对象后，从响应中获取Date HTTP header：

let cacheNames = await caches.keys()
let cachesStorage = {}
let promises = cacheNames.map(async cacheName => {
    const cache = await caches.open(cacheName)
    const cachedResources = await cache.keys()

    for (const request of cachedResources) {
        const response = await cache.match(request)
        console.log(response.headers.get('Date'))
        // CHECK DATE HERE AND COMPARE WITH CURRENT DATE
    }
    
    return cacheName
})
await Promise.all(promises)

【讨论】：