service-worker - Workbox Stale-while-revalidate 策略总是从网络调用而不是缓存返回响应

Question

我正在使用workbox-webpack-plugin，下面是 webpack 配置中的代码

new GenerateSW({
  runtimeCaching: [
    {
      urlPattern: new RegExp('^https://devapi\.mysite\.xyz/'),
      handler: 'staleWhileRevalidate',
      options: {
        cacheableResponse: {
            statuses: [200]
        }
      }
    }
  ]
})

以下是根据谷歌文档重新验证策略时的陈旧流程

我从跨域调用 API，我观察到每次响应不是从缓存而是从网络调用响应返回给 UI。

我期待第二次调用相同的 API 时，我应该从缓存中获取响应，然后缓存应该从网络调用的响应中更新。

Answer 1

我认为本“处理第三方请求”指南中的所有信息都应该有所帮助。

特别是，请确保您的远程服务器正在使用 CORS，否则您将返回response一个状态为0. 您将cacheableResponse插件显式配置为仅缓存状态为200.

Answer 2

对于现在偶然发现这一点的任何人，正确的片段应该是。WorkboxStaleWhileRevalidate听不到staleWhileRevalidate。

new GenerateSW({
  runtimeCaching: [
    {
      urlPattern: new RegExp('^https://devapi\.mysite\.xyz/'),
      handler: 'StaleWhileRevalidate',
      options: {
        cacheableResponse: {
            statuses: [200]
        }
      }
    }
  ]
})