“重新验证时工作箱”策略始终返回网络调用的响应而不是缓存

Question

我正在使用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时，我应该从缓存中获取响应，然后应该从网络调用的响应中更新缓存。

Answer 1

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

尤其要确保您的远程服务器正在使用CORS，否则您将获得状态为response的{​​{1}}。您正在明确配置0插件，使其仅缓存状态为cacheableResponse的响应。