Why does Chrome show duplicate HTTP requests when using the angular service-worker?

Question

When chrome makes HTTP requests with the angular service-worker enabled, I see something like this in the Chrome network tab:

• Why does the chrome network tab show two requests for each request made, one fetch, one xhr? (I only see one request on the server)
• Why is there no response data for the fetch request?
• Is the duration and size of each request accurate?

I'm following the official service-worker guide and I'm on the latest Angular 9.

In firefox I do not see the duplicate requests:

Chrome version: 81.0.4044.129

Firefox version: 76.0

Answer 1

Service worker is handling this request, it's like proxy. The original request is dismissed. This is happening because SW is caching responses (like images, styles or routing) for better performance - instead of downloading resources all the time from server (but this can be changed in Service worker configuration), SW is serving them from browser cache. It's working even if user is offline - that's why routing is working, because service worker is serving html from cache and it's possible to reach the site