Service Worker fetch event is not called while Chrome Developer Tools is open
99% of the time when browser API does not work as expected, the issue is somewhere in the frontend developer’s code. That’s at least the assumption I am usually programming under. Especially, when it is Chrome - widely used and stable browser.
When the issue turns out to be in the browser, it is very frustrating and a lot of time is lost looking for an issue where it doesn't exist. This recently happened to me when implementing Service Worker to enable MobileRank.co offline mode. Service Worker has a fetch event, which allows it to intercept browser requests and decide if response should come from the network or from a local cache.
To my surprise, the breakpoint in the fetch event was not being called and Chrome was responding with a downasaur in the offline mode. What is going on? How could I get a simple event subscription wrong? After spending a couple of hours banging my head on the problem, I finally tried to test a website, which I implemented a few years ago and knew the Service Worker to be working. AHA! It did not work either.
Now it was clear that the issue was not with the Service Worker. I opened MobileRank.co in incognito mode next and tried again, it worked. What was the difference? The Developer Tools panel was not open in the incognito mode. I tried my hunch in a normal browser mode again and it was clear: Service Worker fetch event is not called while DevTools panel is open. All other Service Worker events are called.
Hopefully, you will find this article and it will save you hours of frustration. This issue still reproduces as of Chrome 81. I have not found any other mitigation than closing DevTools when testing Service Worker offline mode. This also affects the local Lighthouse PWA report and will fail the test.