web-dev-qa-db-ja.com

「Chrome Network DevTools？

私はhttpステータスコードに精通していますが、最近、chromeデバッガーに奇妙な行がありました。通常のStatus Code:200 OKの代わりに、次のように見えました：Status Code:200 OK (from ServiceWorker).

enter image description here

私の推測では、これはServiceWorkerが何らかの形でこのドキュメントにアクセスする責任があることを示しているだけですが、これは単なるランダムな推測です。 （推測なしで、尊敬されるリソースへのリンクを付けて）誰もが正式にこれが何を意味し、どのような影響があるのか​​教えてもらえますか？

javascripthtml5google-chromehttp-headersservice-worker
29
Salvador Dali

これは混乱の一般的な原因であるため、もう少し詳しく説明します。

this Gist に完全に動作するデモがあり、RawGitのおかげで live version of it を表示できます。

説明のために、Service Workerコードの関連部分をインラインで示します。

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

そして、サービスワーカーがページを制御しており、one.js、two.js、three.jsに対するリクエストが行われている場合、Chrome 48のネットワークパネルのフィルターバージョンは次のようになります。

Chrome DevTools Network panel

サービスワーカーのfetchハンドラーは、次の3つのいずれかを実行します。

  • one.jsに対するリクエストの場合、同じURLに対するfetch()リクエストを実行し、そのレスポンスを使用してevent.respondWith()を呼び出します。スクリーンショットの最初のone.jsエントリ、「Size」列に「（from ServiceWorker）」が含まれているエントリは、fetchハンドラ内でevent.respondWith()を呼び出したという事実により存在します。スクリーンショットの2番目のone.jsエントリは、横に小さな歯車アイコンがあり、「サイズ」列に「（キャッシュから）」があり、応答中にサービスワーカー内で行われたfetch()リクエストを表します行事。このスクリーンショットを撮った時点で実際のone.jsファイルはすでにHTTPキャッシュにあったため、「（キャッシュから）」が表示されますが、HTTPキャッシュにその応答がない場合は、実際のネットワークリクエストが表示されます応答サイズ。
  • two.jsに対するリクエストの場合、「薄い空気から」新しいResponseオブジェクトを構築することでリクエストを処理します。 （はい、できます！）この場合、event.respondWith()を呼び出しているため、two.jsのエントリがあり、 "Size"列に "（from ServiceWorker）"があります。ただし、one.jsとは異なり、fetch()を使用して応答を設定しないため、two.jsの[ネットワーク]パネルには追加のエントリはありません。
  • 最後に、それがthree.jsに対するリクエストである場合、サービスワーカーのfetchイベントハンドラーは実際にevent.respondWith()を呼び出しません。ページの観点から、およびネットワークパネルの観点からも、そのリクエストにサービスワーカーが関与することはありません。そのため、「サイズ」に「（ServiceWorker）」ではなく「（from from cache）」 」列。
54
Jeff Posnick

サービスワーカーは、バックグラウンドでブラウザによって実行されるスクリプトです。したがって、ステータスコード：200 OK（ServiceWorkerから）は、GETまたはHEADリクエストおよびこのステータスはServiceWorkerから取得されます。

このリンクを読んで、これについてさらに理解することができます。 http://www.html5rocks.com/en/tutorials/service-worker/introduction/

3
Hoang Tran Son

これは正常です 。リクエストごとに200によって生じる混乱を避けるため。リクエストがSUCCESSであるが、service-workerがnetwork/serverの代わりにリソース/リクエストに対して応答したことを示しています

1
Atul Sharma