"Kod stanu: 200 OK (z ServiceWorker)" w Chrome Network DevTools?

Question

Jestem zaznajomiony z kodami stanu http, ale ostatnio widziałem dziwną linię w moim debugerze chrome. Zamiast zwykłego Status Code:200 OK zobaczyłem: Status Code:200 OK (from ServiceWorker).

Domyślam się, że to po prostu mówi mi, że jest w jakiś sposób odpowiedzialny ServiceWorker dostępu do tego dokumentu, ale jest to tylko przypadkowy przypuszczenie. Czy każdy autorytatywnie (bez zgadywania, z linkami do respektowanych zasobów) może mi powiedzieć, co to oznacza i jakie są tego konsekwencje?

Answer 1

Jest to częste źródło nieporozumień, więc chciałem zagłębić się w szczegóły.

Mam pełną wersję demonstracyjną w this Gist, a dzięki RawGit można wyświetlić live version of it.

Oto odnośny fragment kodu inline Pracownik serwisu, w celach poglądowych:

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. 
}); 

A oto co filtrowany wersja panelu Sieć wygląda w Chrome 48, gdy pracownik ten serwis jest kontrolą stron i wnioski są dla one.js, two.js i three.js:

Nasza usługa pracownika fetch uchwyt R będzie zrobić jedną z trzech rzeczy:

• Jeśli jest to wniosek o one.js będzie wystrzelić fetch() wniosek o tej samej zawartości, a następnie zadzwonić event.respondWith() użyciu tej odpowiedzi. Pierwszy wpis one.js na zrzucie ekranu, ten z "(z ServiceWorker)" w kolumnie "Rozmiar", wynika z faktu, że nazwaliśmy event.respondWith() wewnątrz procedury obsługi fetch. Drugi wpis one.js na zrzucie ekranu, w którym znajduje się mała ikona koła zębatego obok niego i "(z pamięci podręcznej)" w kolumnie "Rozmiar", reprezentuje to żądanie zgłoszone przez pracownika serwisu podczas odpowiadania na zdarzenie. Ponieważ aktualny plik one.js znajdował się już w pamięci podręcznej HTTP w punkcie, w którym wykonałem zrzut ekranu, zobaczysz "(z pamięci podręcznej)", ale jeśli pamięć podręczna HTTP nie ma już tej odpowiedzi, zobaczysz rzeczywiste żądanie sieciowe wraz z rozmiar odpowiedzi.
• Jeśli jest to żądanie dla two.js, zajmie się tym żądaniem, konstruując nowy obiekt "z powietrza", tworząc nowy obiekt Response. (Tak, możesz to zrobić!) W tym przypadku wywołujemy event.respondWith(), więc jest wpis dla two.js z "(z ServiceWorker)" w kolumnie "Rozmiar". Ale w przeciwieństwie do one.js, nie używamy fetch() do wypełnienia odpowiedzi, więc nie ma dodatkowego wpisu w panelu Sieć dla two.js.
• Na koniec, jeśli jest to żądanie dla three.js, nasz moduł obsługi zdarzeń naszego pracownika serwisowego w rzeczywistości nie zadzwoni pod numer event.respondWith().Z punktu widzenia strony, a także z perspektywy panelu Sieć, nie ma zaangażowania pracownika serwisowego w to żądanie, dlatego w "Rozmiarach" zamiast "(z ServiceWorker) jest tylko" (z pamięci podręcznej) ". "kolumna.

Answer 2

Pracownik usług to skrypt uruchamiany przez przeglądarkę w tle. Zatem kod stanu: 200 OK (od ServiceWorker) oznacza, że ​​kod sukcesu "OK" dla żądania GET lub HEAD i tego statusu pochodzi od ServiceWorker.

Możesz przeczytać ten link, aby dowiedzieć się więcej na ten temat. http://www.html5rocks.com/en/tutorials/service-worker/introduction/

Answer 3

Jest to normalne. Aby uniknąć nieporozumień wynikających z 200 dla każdego żądania. Pokazuje, że żądanie to jest SUCCESS, ale service-worker odpowiedział na żądanie/zasób zamiast network/server