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

【问题标题】：Workbox Stale-while-revalidate strategy always returns response from network call instead of cacheWorkbox Stale-while-revalidate 策略总是从网络调用而不是缓存返回响应
【发布时间】：2019-04-08 12:53:05
【问题描述】：

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

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

以下是根据google doc重新验证策略时的陈旧流程

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

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

【问题讨论】：

标签： service-worker workbox workbox-webpack-plugin

【解决方案1】：

我认为本“Handle Third Party Requests”指南中的所有信息都应该有所帮助。

尤其要确保您的远程服务器正在使用 CORS，否则您将返回一个状态为 0 的 response。您将cacheableResponse 插件显式配置为仅缓存状态为200 的响应。

【讨论】：

【解决方案2】：

对于现在遇到这个问题的人来说，正确的 sn-p 应该是。 Workbox 监听 StaleWhileRevalidate 而不是 staleWhileRevalidate。

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

【讨论】：