DNSが​死んでいるのに​サイトが​自分だけ​表示され続けるのは​なぜか

本来なら​DNS​（＝ドメイン名を​IPアドレスに​変換する​仕組み）が​死んでいるはずなのに、​特定の​PCの​Chromeでは​F5​（再読み込み）を​押しても​表示され続ける​ことがある。​これは​不具合ではなく、​ブラウザが​ネットワークを​使わずに​手元の​複製から​意図的に​応答している​状態だ。

ブラウザの​HTTPキャッシュ

ブラウザの​HTTPキャッシュは、​一度​読み込んだ​HTML・CSS・画像などを​ローカルに​保存し再利用する​仕組みである。​サーバーの​応答ヘッダー​（Cache-ControlやExpires）が​指定する​期間は、​ネットワークに​出ずに​保存済みデータを​返す。

ただしHTTPキャッシュは、​再読み込み​（F5）​時には​多くの​場合サーバーへ​再検証​（＝まだ​新しいかを​サーバーに​確認する​こと）を​試みる。​DNSが​死んでいれば​確認できないため、​本来は​エラーに​なるはずである。​それでも​表示され続けるなら、​別の​仕組みが​働いている。

Service Worker——ブラウザに​常駐する​配達係

Service Worker（＝ページとは​独立して​ブラウザの​裏側で​動く​小さな​JavaScriptプログラム）は、​配達係に​たとえるなら、​初回訪問時に​サイト全体を​自分の​倉庫​（Cache Storage）に​保管し、​以降は​ネットワークに​出る​前に​倉庫から​応答できる。

1. fetchイベントが​発生する
2. Service Workerが​それを​インターセプト​（＝横取り）する
3. Cache Storageに​一致が​あるか
   • あり：キャッシュから​応答する​（ネットワーク不要）
   • なし：ネットワークへ​フォールバック​（＝代替手段に​切り替える​こと）する

つまりDNSが​死んでいても、​Service Workerが​生きていて​倉庫に​データが​あれば​画面は​表示される。​ただし​表示されるのは、​最後に​正常接続できた​時点の​古い​バージ​ョンである。

PWAと​Service Workerの​登録

PWA（Progressive Web App）は、​Service Workerと​Manifestファイル​（＝アプリの​設定情報を​記した​定義ファイル）を​使い、​ネイティブアプリのように​インストール可能・オフライン動作可能に​した​Webサイトである。vite-plugin-pwaやWorkbox（Googleの​Service Worker用ライブラリ群）で​構築される​ことが​多い。​Service Workerの​有効化​（registerSW）を​本番環境限定に​する​設定も​一般的で、​開発中は​この​挙動の​違いに​気づきにくい。

SPAと​生き残る​タブ

SPA（Single Page Application）は、​最初の​1回だけHTMLを​読み込み、​以降は​JavaScriptが​同じタブ内で​画面を​切り​替える​アプリである。​一度​読み込まれると、​タブを​閉じない​限り前の​画面は​メモリに​残り続ける​ため、​タブを​開いたままに​していれば​DNSが​死んだ​後も​表示が​維持される。

リダイレクトガードの​波及

リダイレクトガードとは、​ある​ドメインを​開いた​時に​別の​ドメインへ​自動転送する​仕組み​（HTTPの301/302応答、​または​フレームワークの​ルーティング設定）である。​転送先の​DNSが​死んでいる​場合、​入り口が​どこであっても​最終的に​「繋がらない」と​いう​波及的な​障害に​なる。

原因の​切り分け——シークレットウィンドウを​使う

シークレット​（プライベート）​ウィンドウは、​Service Worker・HTTPキャッシュ・Cookie・セッションの​すべてが​無効化された、​まっさらな​ブラウザセッションである。

状況	通常ウィンドウ	シークレットウィンドウ
DNSが​死んでいる、​SW・キャッシュ​あり	表示される	繋がらない
DNSが​生きている	表示される	表示される

シークレットで​「繋がらない」なら、​通常ウィンドウで​見えているのは​キャッシュか​Service Workerの​おかげだと​確認できる。​世界から​見れば、​その​サイトは​落ちている。

まとめ

「自分だけ​見える」ことと​「世界から​繋がる」ことは​別問題である。​Service Workerは​過去の​倉庫から​応答しているに​すぎず、​新しい​PC・別の​人・シークレットウィンドウでは​表示されない。​まずシークレットウィンドウで​確認するのが​最初の​一手である。​Service Workerを​強制的に​削除するには、​Chromeの​DevTools → Application → Service Workers → Unregisterで​解除する。