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

Question

我正在为我的站点使用 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');

标签： javascriptvue.jsprogressive-web-appsservice-workerworkbox

Answer 1

首先，在您的 API 中拥有正确的CORS 标头很重要（如果它位于与网站不同的来源上）。为了得到完整的响应而不是不透明的响应，这是必要的。

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

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

找到您要查找的特定资源的 Response 对象后，从 Response 中获取Date HTTP 标头：

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)