現在のページはオフライン時に 200 の応答がありません

プログレッシブ ウェブアプリの中核チェックリストには、PWA でカスタムのオフライン ページを用意する必要があると記載されています。最適化されたプログレッシブ ウェブアプリのチェックリストには、PWA がオフラインでもオンラインと同様に動作するオフライン エクスペリエンスを提供する必要があると書かれています（ネットワーク接続が厳密には不要な場合）。

詳しくは、ネットワークの信頼性の概要と測定方法の投稿をご覧ください。

Lighthouse のオフライン監査が失敗する仕組み

Lighthouse では、オフラインのときに HTTP 200 レスポンスのレスポンスがないページにフラグが設定されます。

Lighthouse の監査でオフライン時にページが 200 の応答を返さない

Lighthouse は、Chrome のリモート デバッグ プロトコルを使用してオフライン接続をエミュレートし、XMLHttpRequest を使用してページの取得を試みます。

PWA をオフラインで動作させる方法

  1. アプリに Service Worker を追加します。
  2. Service Worker を使用してファイルをローカルのキャッシュに保存します。
  3. オフライン時に、Service Worker をネットワーク プロキシとして使用して、ローカルにキャッシュされたバージョンのファイルを返します。

リソース