LighthouseでのPWAにおけるチェック項目について

サイトがPWAに正しく対応しているかどうか計測する際にはGoogle Chrome拡張のLighthouseを使うのが基本です。今回はProgressive Web App Checklistで提示されているPWAのチェックリストに沿って、どういった項目がチェックされているのかを紹介します。

HTTPSになっているか

WebサイトがHTTPSに対応しているか、さらにHTTPにアクセスした際にリダイレクトするかチェックします。

タブレットやスマートフォンに対してレスポンシブに対応しているか

スマートフォン向けにデザインを変えるのではなく、レスポンシブWebデザインであることが基本です。

アプリに関係するURLがすべてオフラインに対応しているか

トップページだけPWAといった状態ではなく、クリック先も含めてPWA対応しているかが問われます。

Add to Home Screenに対応したメタ情報が指定されているか

いわゆるmanifest.jsonに絡んだ話です。アプリ名やアイコンなどが指定されている必要があります。

3G環境でも10秒以内に表示されるか

遅いサイトはPWAとして不向きです。3G環境でもユーザにストレスを与えない速度での表示が求められます。

クロスブラウザで動作するか

Google Chromeだけでなく、Firefox/Safari/Edgeにも対応している必要があります。

ページ遷移がネットワークをブロックしていないか

ページ遷移時のアニメーションによって表示がもたつかないことを求められます。

すべてのページがURLを持っているか

URLがユニークになっており、そのURLにアクセスした際に適切な情報が表示されることが望まれます。

高度な制約

さらに細かく見ていきます。これらはLighthouseでチェックできないものもあります。

サイトがGoogleでインデックス化されているか

Googleのインデックス状況をチェックして、すべてのページが望ましくインデックス化されている必要があります。

Schema.orgで定義されているメタデータが設定されているか

インデックス化に関係しますが、必要なメタデータが設定されていなければなりません。

FacebookやTwitterなどのOpen Graphが設定されているか

シェアされる際に必要なOGPが設定されているか確認されます。

Canonical URLが設定されているか

pwaでは独自のクエリ、ハッシュタグを設定することがあります。そのためCanonical URLによってシェアするURLが指定されていることが望ましいです。

History APIを使っているか

ページ遷移に物理ボタンやキーボードショートカットでも対応するHistory APIが使われている必要があります。

ページ遷移が滑らかに行われているか

ページ読み込みが再度全コンテンツのレンダリングではなく、スムーズなアニメーションによって行われているのが望ましいです。

リストページから詳細ページに移動してバックボタンを押した時、リストを再現して表示されるか

History APIに関連しますが、リストの最上部に戻るのではなく、クリックした場所に戻ってくるのが望ましいです。

キーボードがテキスト入力欄を覆ってしまわないか

ソフトウェアキーボードを表示した際に入力欄を隠してしまわないように注意しましょう。

コンテンツが容易にシェアできるか

Web Share APIを使ったりして、コンテンツのシェアが手軽にできるのが望ましいです。

アプリのインストールプロンプトが過剰ではないか

PWAとしてアプリインストールは必要ですが、それが過剰になっているとユーザビリティが下がります。

キャッシュが使われてるか

Service Workerによるキャッシュを効率的に使って、高速な表示を実現します。

プッシュ通知の送る内容などをユーザに提示しているか

プッシュ通知はスマートフォンアプリと同様、否応なく表示されるべきではありません。

プッシュ通知の有効化を過度に求めていないか

こちらも上記と同様です。

プッシュ通知は関連性があり、タイムリーかつ正確なものになっているか

送る内容に関する注意喚起です。

プッシュ通知をオフにする方法を提供しているか

オフにする方法が提示されていないことが多く、ユーザを混乱させるでしょう。

Credential Management APIを提供しているか

認証のAPIです。

Payment Request APIを提供しているか

決済のAPIです。Eコマースなどでは必須でしょう。

---

ここに挙げたものはベースラインとなっています。プッシュ通知などは運用にまで踏み込んだ内容になっています。ぜひ全体をチェックリストとして、ユーザビリティの高いPWAを目指してください。