"Status Code:200 OK (from ServiceWorker)" in Chrome Network DevTools?
Solution 1
This is a common source of confusion, so I wanted to go into a bit more detail.
I have a full working demo in this Gist, and you can view a live version of it thanks to RawGit.
Here's the relevant portion of the service worker code inline, for illustrative purposes:
self.addEventListener('fetch', event => {
if (event.request.url.endsWith('one.js')) {
// Requests for one.js will result in the SW firing off a fetch() request,
// which will be reflected in the DevTools Network panel.
event.respondWith(fetch(event.request));
} else if (event.request.url.endsWith('two.js')) {
// Requests for two.js will result in the SW constructing a new Response object,
// so there won't be an additional network request in the DevTools Network panel.
event.respondWith(new Response('// no-op'));
}
// Requests for anything else won't trigger event.respondWith(), so there won't be
// any SW interaction reflected in the DevTools Network panel.
});
And here's what a filtered version of the Network panel looks like in Chrome 48 when that service worker is in control of a page, and requests are made for one.js
, two.js
, and three.js
:
Our service worker's fetch
handler will do one of three things:
- If it's a request for
one.js
, it will fire off afetch()
request for the same URL, and then callevent.respondWith()
using that response. The firstone.js
entry in the screenshot, the one with "(from ServiceWorker)" in the "Size" column, is there by virtue of the fact that we calledevent.respondWith()
inside thefetch
handler. The secondone.js
entry in the screenshot, the one with the little gear icon next to it and "(from cache)" in the "Size" column, represents thatfetch()
request that was made inside the service worker while responding to the event. Since the actualone.js
file was already in the HTTP cache at the point I took this screenshot, you see "(from cache)", but if the HTTP cache didn't have that response already, you would see an actual network request along with the response size. - If it's a request for
two.js
, it will handle the request by constructing a newResponse
object "from thin air". (Yes, you can do that!) In this case, we are callingevent.respondWith()
, so there's an entry fortwo.js
with "(from ServiceWorker)" in the "Size" column. But unlike withone.js
, we're not usingfetch()
to populate the response, so there's no additional entry in the Network panel fortwo.js
. - Finally, if it's a request for
three.js
, our service worker'sfetch
event handler won't actually callevent.respondWith()
. From the perspective of the page, and also from the perspective of the Network panel, there's no service worker involvement with that request, which is why there's just a "(from cache)" rather than "(from ServiceWorker)" in the "Size" column.
Solution 2
A service worker is a script that is run by your browser in the background. So Status Code:200 OK (from ServiceWorker) mean that “OK” success code, for GET or HEAD request and this status come from ServiceWorker.
You can read this link to understand more about this. http://www.html5rocks.com/en/tutorials/service-worker/introduction/
Solution 3
This is normal . To avoid confusion arising out by 200
for every request. Its showing that the request is a SUCCESS
but service-worker
has responded for the resource / request instead of network/server
Related videos on Youtube
Salvador Dali
I am a Software Engineer in the Google Search Growth team. I use Tensorflow and TFX to analyze search data and Go to write data pipelines. This is my personal profile which has absolutely nothing to do with my employer.
Updated on July 20, 2022Comments
-
Salvador Dali almost 2 years
I am familiar with http status codes, but recently I saw a strange line in my chrome debugger. Instead of ordinary
Status Code:200 OK
I saw the following:Status Code:200 OK (from ServiceWorker)
.My guess is that this just tells me that ServiceWorker is somehow responsible for accessing this document, but this is just random guess. Can anyone authoritatively (without guesses, with links to respected resources) tell me what does this mean and what are the implications?
-
Salvador Dali over 8 yearsWhat implications will it have?
-
Šime Vidas over 8 yearsAll the entries with the gear icon have the value “Other” in the Initiator column. Maybe a more descriptive value would make more sense?
-
Noel Abrahams over 5 years@JeffPosnick the problem arises when you want to check the cache. developers.google.com/web/ilt/pwa/… With this suggested method every request is listed as "from service worker" on the chrome tab, even those delegated to the network. How does one ensure true network requests are shown correctly in this scenario?
-
joeshmoe301 over 5 yearsWhat does the gear icon mean?
-
joeshmoe301 over 5 yearsI found the answer to my question about what the gear icon means on the google debugging service workers page (developers.google.com/web/fundamentals/codelabs/…), which also references this stackoverflow question. "The gear icon signifies that these requests came from the Service Worker itself. Specifically, these are the requests being made by the Service Worker's install handler to populate the offline cache."
-
Nevin Madhukar K over 3 years@Jeff Posnick Hello, could you check this question : stackoverflow.com/questions/64117929/…