chrome dev tools でgatsby.js の公式サイトをみていたところ、いくつかのリソースに歯車マークが付与されているのを見つけました。
Chrome Dev Tools の Network 画面
質問
この歯車は何を表していますか?
(上記画像でいう、 2番目の www.gatsbyjs.org
と 9番目の page-data.json
に付与されている、名前の左にある歯車アイコンは何であるのか、という質問です)
スタック・オーバーフローはプログラマーとプログラミングに熱心な人のためのQ&Aサイトです。すぐ登録できます。
登録してこのコミュニティに参加するchrome dev tools でgatsby.js の公式サイトをみていたところ、いくつかのリソースに歯車マークが付与されているのを見つけました。
Chrome Dev Tools の Network 画面
この歯車は何を表していますか?
(上記画像でいう、 2番目の www.gatsbyjs.org
と 9番目の page-data.json
に付与されている、名前の左にある歯車アイコンは何であるのか、という質問です)
歯車のアイコンは、それらのリクエストが Service Worker によるものであることを示しています[1]。
What's with the gear?[1]
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.
Learn More: For a deeper understanding of the Network panel identifies Service Worker traffic take a look at this StackOverflow discussion.
また、 Service Worker によって発生した、または潜在的に変更されたリクエストは is:service-worker-initiated
または is:service-worker-intercepted
を用いることでフィルターすることが出来ます (後者の場合は歯車アイコンは付与されない)[2]。
Service worker filters in the Network panel[2]
Type
is:service-worker-initiated
oris:service-worker-intercepted
in the Network panel filter text box to view requests that were caused (initiated
) or potentially modified (intercepted
) by a service worker.
gatsby.js の公式サイトでこれらを使用した場合、以下のような結果になります。
is:service-worker-initiated
を使用した場合is:service-worker-intercepted
を使用した場合