Vue PWA：检查响应是否来自缓存以及它有多旧

Question

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

这是我目前的 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');

Answer 1

首先重要的是要有正确的CORS headers in your API (if it lives on an origin different than the website's). This is necessary in order to get the full response back instead of opaque responses。

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

Each resource cached by Workbox can be found as a key within a Cache as a Response object.

找到您要查找的特定资源的 Response 对象后，从 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)

Vue PWA：检查响应是否来自缓存以及它有多旧

Vue PWA: Check if response was from cache and how old it is

javascript

vue.js

progressive-web-apps

service-worker

workbox