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

Question

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

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

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

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

铬版本：81.0.4044.129

火狐版本：76.0

标签： angulargoogle-chromeservice-workerangular-service-worker

Answer 1

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