63127


chrome dev tools で[gatsby.js
の公式サイト](https://www.gatsbyjs.org/)をみていたところ、いくつかのリソースに歯車マークが付与されているのを見つけました。

**Chrome Dev Tools の Network 画面**

[![chrome dev tool の network
画面](https://i.stack.imgur.com/vQA5y.png)](https://i.stack.imgur.com/vQA5y.png)

### 質問

この歯車は何を表していますか？  
(上記画像でいう、 2番目の `www.gatsbyjs.org` と 9番目の `page-data.json`
に付与されている、名前の左にある歯車アイコンは何であるのか、という質問です)


CC BY-SA 4.0
2020-02-17T13:31:28.707
63122
2020-02-18T00:29:27.187
2020-02-18T00:29:27.187
3060
754
question
google-chrome-devtools
chrome dev tools の Network タブの歯車アイコンは何を表す？


歯車のアイコンは、それらのリクエストが **Service Worker によるもの**
であることを示しています[[1]](https://codelabs.developers.google.com/codelabs/debugging-
service-workers/#3)。

> ### What's with the
> gear?[[1]](https://codelabs.developers.google.com/codelabs/debugging-
> service-workers/#3)
>
> 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](http://stackoverflow.com/a/33655173/).

また、 Service Worker によって発生した、または潜在的に変更されたリクエストは `is:service-worker-initiated`
または `is:service-worker-intercepted` を用いることでフィルターすることが出来ます
(後者の場合は歯車アイコンは付与されない)[[2]](https://developers.google.com/web/updates/2019/03/devtools#swfilters)。

> ### Service worker filters in the Network
> panel[[2]](https://developers.google.com/web/updates/2019/03/devtools#swfilters)
>
> Type `is:service-worker-initiated` or `is: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-initiatedを入力した例。Service
Workerによって発生したリクエストがフィルターされた結果として表示されている](https://i.stack.imgur.com/41qaJ.png)](https://i.stack.imgur.com/41qaJ.png)

### `is:service-worker-intercepted` を使用した場合

[![is:service-worker-interceptedを入力した例。Service Worker
によって潜在的に変更されたリクエストがフィルターされた結果表示されているが、歯車アイコンは表示されていない。](https://i.stack.imgur.com/LiFWw.png)](https://i.stack.imgur.com/LiFWw.png)


CC BY-SA 4.0
2020-02-17T15:14:15.600
63127
2020-02-17T15:14:15.600
2020-06-17T08:14:45.997
-1
32986
63122
answer