为什么 Chrome 在使用 angular service-worker 时会显示重复的 HTTP 请求？

Question

当 chrome 在启用 angular service-worker 的情况下发出 HTTP 请求时，我会在 Chrome 网络选项卡中看到类似的内容：

• 为什么 chrome 网络选项卡为每个请求显示两个请求，一个获取，一个 xhr？（我在服务器上只看到一个请求）
• 为什么获取请求没有响应数据？
• 每个请求的持续时间和大小是否准确？

我正在关注官方服务人员指南，并且使用的是最新的 Angular 9。

在 Firefox 中，我没有看到重复的请求：

Chrome 版本：81.0.4044.129

火狐版本：76.0

Answer 1

Service Worker 正在处理这个请求，它就像代理一样。原请求被驳回。发生这种情况是因为 SW 正在缓存响应（例如图像、样式或路由）以获得更好的性能 - SW 不是一直从服务器下载资源（但这可以在 中更改Service worker configuration），而是从浏览器缓存中为它们提供服务。即使用户离线，它也能工作——这就是路由工作的原因，因为服务工作人员正在从缓存中提供 html，并且可以访问该站点