web-dev-qa-db-ja.com

Chrome DevTools "キャッシュを無効にする"：（Service Workerスクリプトの場合）実際に何も行わない以外は何をしますか？

ローカルディスクキャッシュが空であるという前提で、サイトの動作をテストしようとしています。キャッシュをクリアしてCtrl-F5などを毎回実行する方法があることは知っていますが、[ネットワーク]タブに "=キャッシュを無効にする"チェックボックスもあるようですはずです私がしていることをしてください...すなわち、キャッシュを無効にします。

しかし、キャッシュをクリアし、そのオプションを有効にして、サイトを数回F5で再読み込みすると、次のようになります。

enter image description here

「キャッシュを無効にする」が有効になっているにもかかわらず、リソースはキャッシュされ、キャッシュから提供されています！では、このオプションは実際には何をするのでしょうか？

編集

多分私が見ているこの動作は、Service Workerスクリプトのキャッシュにのみ関連していますか？ このページ （ このガイド からサービスワーカーにリンクされている例）をロードする場合、少なくとも私にとってはsw.jsファイルは、「キャッシュを無効にする」が有効になっている場合でも、ディスクキャッシュからフェッチされます。

google-chromegoogle-chrome-devtoolsservice-workerprogressive-web-apps
11
drmrbrewer

興味深い質問です！

提供したスクリーンショットでは、Name列が切り取られているため、ディスクキャッシュからまだ提供されているリソースを特定できません。 「編集」の説明に基づいて、Service Workerスクリプトであると想定します。

では、「ブラウザーキャッシュサービスワーカー（SW）スクリプトはどのようにスクリプトを実行するのですか？」

  1. SWが登録されると、ブラウザはSWスクリプトをディスクキャッシュ内の別のデータベースに保存します。これをSWデータベースと呼びますが、これは正式な用語ではないことに注意してください。 Service WorkerがimportScripts()を呼び出すと、それらのスクリプトもSWデータベースに保存されることに注意してください。 Service Workerスクリプトが更新されると、ブラウザーはSWデータベースに現在保存されているスクリプトを新しいスクリプトで上書きすることにも注意してください。これは Chrome実装 であり、他のブラウザでは異なる方法で実行される場合があります。 1
  2. ページを読み込むたびに、ブラウザーは非表示のリクエストを行い（つまり、DevToolsではこれを表示できません）、Service Workerスクリプトに更​​新があるかどうかを確認します。 IMO、DevToolsはこのリクエストを公開して、開発者がソフトウェアのライフサイクルをよりよく理解できるようにする必要があります。
    • スクリプトの1バイトが異なる場合、ブラウザはSWデータベースのSWスクリプトを更新します。
    • SWスクリプトが変更されていない場合、ブラウザはSWデータベースからスクリプトを提供するだけです。 Thisは、DevToolsに表示されるリクエストです。 IMO DevToolsがこのリクエストを(from disk cache)と説明していると誤解を招く恐れがあります。理想的には、このキャッシュがDisable Cacheチェックボックスの影響を受けないことを示すために、別の名前を付ける必要があります。

したがって、この場合、あなたは正しいです：Disable cacheチェックボックスは何もしません。キャッシュが完全にクリアされるようにしたい場合（Service Workerのものを含む）：

  1. Clear Storagepane に移動し、すべてのチェックボックスが有効になっていることを確認して、サイトデータをクリア。

  2. DevToolsがまだ開いている間に、ChromeのReloadボタンを長押しして、Empty Cache and Hard Reload。これらのさまざまなオプションの説明については、 https://stackoverflow.com/a/14969509/166986 を参照してください。

    Empty cache and hard reload

1 Chromeエンジニアであり、サービスワーカーの仕様の共同執筆者であるAlex Russellからこの情報を入手しました

13
Kayce Basques

キャッシュを無効にするオプションに加えて、開発者ツールのネットワークペインで右クリックして、ポップアップメニューから[キャッシュをクリア]を選択できるようになりました。

また、キャッシュを頻繁にクリアする必要がある場合は、このプラグインを使用できます。 https://chrome.google.com/webstore/detail/jpfbieopdmepaolggioebjmedmclkbap

1
mrid