The #ChromeDevSummit site is live, happening Nov 12-13 in San Francisco, CA
Check it out for details and request an invite. We'll be diving deep into modern web tech & looking ahead to the platform's future.

オフライン時に URL でステータスコード 200 を返す

監査が重要である理由

Progressive Web App はオフラインでも機能します。オフライン状態でページにアクセスした際に、Lighthouse へのレスポンスとして HTTP 200 が返されない場合は、そのページはオフラインで利用できません。

監査に合格する方法

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

既存のアプリに Service Worker を追加する方法については、ウェブアプリに Service Worker を追加してオフラインでの使用を可能にする をご覧ください。 この実践形式のコードラボでは、自身のアプリに Service Worker を追加する方法を順を追って説明しています。 その中に、上記のステップ 1 と 3 の説明も含まれています。

上記のコードラボでは、Chrome DevTools を使用して Service Worker をデバッグするための基本的な方法もいくつか紹介されています。 さらに詳しい内容は、このトピックに特化したコードラボ Debugging Service Workers をご覧ください。

自身のアプリに最適なキャッシュ技術を特定するには、Offline Cookbook の内容を参考にしてください。 この記事に、上記のステップ 2 の説明が含まれています。

監査方法

このセクションでは Lighthouse による監査方法と監査スコアの算出方法を説明します。

Lighthouse では、Chorme の Debugging Protocol を使用してオフライン接続をエミュレートし、XMLHttpRequest によってページの取得を試みます。