結論

Chrome DevtoolsでNetworkをOfflineに設定してもページが表示されてしまう場合は、ブラウザのキャッシュが原因です。この問題を解決するには、サイトのキャッシュデータを完全にクリアする必要があります。

はじめに

プログレッシブウェブアプリケーション（PWA）の開発やテストを行っている際、オフライン時の動作を確認することは非常に重要です。PWAの大きな特徴の一つは、ネットワーク接続がない状態でもアプリケーションが機能し続けることだからです。

Chrome DevtoolsのNetwork機能を使えば、オフライン環境をシミュレートすることができます。しかし、時にはNetworkパネルで「Offline」モードに切り替えても、ページが予期せず表示され続けるケースがあります。これはService Worker（SW）でキャッシュを設定していないにも関わらず起こることがあり、開発者を混乱させます。

問題の詳細

以下のような状況に遭遇したことはありませんか？

• Chrome DevtoolsでNetworkを「Offline」に設定している
• Service Workerを実装していない、またはキャッシュ機能を有効にしていない
• それでもブラウザはページを表示し続ける

これは、ブラウザがさまざまな方法でコンテンツをキャッシュしているために起こります。特に:

1. HTTPキャッシュ: ブラウザの通常のHTTPキャッシュ機構
2. Back/Forward Cache (bfcache): 高速なページナビゲーションのために保存されるキャッシュ
3. メモリキャッシュ: ブラウザのメモリ内に保持される一時的なキャッシュ

これらのキャッシュ機構が、意図せずオフラインモードでもページを表示させる原因となっています。

対策方法

この問題に対処するための最も効果的な方法は、ブラウザのキャッシュデータをクリアすることです。以下の方法を順番に試してみましょう。一つで解決しない場合は、次の方法を試すことをお勧めします:

1. キャッシュデータのクリア

1. Chrome DevtoolsのApplicationパネルを開きます
2. 左側のサイドバーで「Storage」セクションを展開します
3. 「Clear site data」ボタンをクリックします

2. キャッシュを無効にした状態でリロード

キャッシュを完全に無視してページをリロードするには：

1. リロードボタンを右クリックします
2. 「Empty Cache and Hard Reload」を選択します

3. シークレットウィンドウでテスト

上記の方法でも問題が解決しない場合は、シークレットウィンドウ（プライベートブラウジング）を使用すると、ほぼ確実に新鮮な状態でテストできます：

1. Ctrl+Shift+N（Windows/Linux）またはCmd+Shift+N（Mac）でシークレットウィンドウを開きます
2. サイトにアクセスし、DevtoolsでOfflineモードに設定します

注意: これらの方法は順番に試すことをお勧めします。多くの場合、方法1のキャッシュクリアだけで解決しますが、問題が解決しない場合は方法2、それでも解決しない場合は方法3と進んでください。

詳細な確認方法

キャッシュの動作を詳細に確認したい場合は、以下の手順も有効です：

1. Network パネルで「Disable cache」オプションを有効にする
2. Application パネルの「Cache Storage」セクションを確認する

終わりに

Chrome DevtoolsのOfflineモードは開発プロセスの中で非常に便利なツールですが、ブラウザの多層的なキャッシュ機構によって予期せぬ動作をすることがあります。適切な方法でキャッシュをクリアすることで、より正確にオフライン動作をテストすることができます。

このような問題に直面した場合、忍耐強くさまざまなキャッシュクリア方法を試してみてください。それでも問題が解決しない場合は、ブラウザのキャッシュ動作について更に詳しく調査することで、問題の根本原因を特定できるかもしれません。

PWA開発において、オフライン動作は重要な機能の一つです。適切なテスト環境を整えることで、ユーザーに信頼性の高いオフライン体験を提供できるアプリケーションの開発が可能になります。

参考リンク

• Chrome DevTools のネットワーク条件をエミュレート
• Service Workerの基本
• ブラウザのキャッシュメカニズム