プログレッシブ ウェブアプリ（PWA）は、最新の API を使用して構築および強化されており、機能、信頼性、インストール性を強化し、単一のコードベースであらゆるデバイス、あらゆる場所、あらゆるユーザーにリーチできます。最適なエクスペリエンスを実現できるよう、コアと最適のチェックリストと推奨事項を参考にしてください。
プログレッシブ ウェブアプリのコア チェックリスト
プログレッシブ ウェブ アプリのチェックリストでは、サイズや入力タイプに関係なく、すべてのユーザーがアプリをインストールして使用できるようにするための要件について説明しています。
パフォーマンスは、オンライン エクスペリエンスの成功に重要な役割を果たします。パフォーマンスの高いサイトは、パフォーマンスの低いサイトよりユーザーを惹きつけ、維持します。ユーザー中心のパフォーマンス指標の最適化に重点を置きます。
理由
アプリを使用してもらうには、速度が重要です。実際、ページの読み込み時間が 1 秒から 10 秒に増えると、ユーザーが直帰する確率は 123% 増加します。パフォーマンスは load イベントで停止しません。ユーザーは、ボタンのクリックなどの操作が登録されたかどうかを疑う必要はありません。スクロールとアニメーションはスムーズに動作する必要があります。
パフォーマンスは、アプリの動作とユーザーの認識の両方で、エクスペリエンス全体に影響します。
すべてのアプリケーションのニーズは異なりますが、Lighthouse のパフォーマンス チェックは Core Web Vitals に基づいています。これらのチェックで高いスコアが得られれば、ユーザーが快適なエクスペリエンスを得られる可能性が高まります。PageSpeed Insights や Chrome ユーザー エクスペリエンス レポートを使用して、ウェブアプリの実際のパフォーマンス データを取得することもできます。
方法
高速読み込みガイドに沿って、PWA を高速に起動して高速に維持する方法を確認してください。
ユーザーは、ウェブアプリをインストールする前に、任意のブラウザを使用してウェブアプリにアクセスできます。
理由
プログレッシブ ウェブアプリはまずウェブアプリであるため、ブラウザ間で動作する必要があります。
これを効果的に行う方法として、Jeremy Keith 氏の Resilient Web Design では、コア機能を特定し、可能な限りシンプルなテクノロジーを使用してそれらの機能を利用できるようにし、可能であればエクスペリエンスを強化することを推奨しています。多くの場合、HTML のみを使用してコア機能を作成し、CSS と JavaScript を使用してユーザー エクスペリエンスを強化し、より魅力的なエクスペリエンスを実現します。
フォームの送信を例に考えてみましょう。これを実装する最も簡単な方法は、POST リクエストを送信する HTML フォームを使用することです。作成したら、JavaScript を使用してフォームの検証を行い、AJAX 経由でフォームを送信することで、対応しているユーザーのエクスペリエンスを向上させることができます。
ユーザーはさまざまなデバイスとブラウザでサイトを利用します。スペクトラムの上限だけをターゲットにすることはできません。機能検出を使用して、まだ存在しないブラウザやデバイスを使用しているユーザーなど、できるだけ幅広い潜在的なユーザーに使いやすいエクスペリエンスを提供します。
方法
Jeremy Keith 氏の Resilient Web Design は、このクロスブラウザの漸進的な方法論でウェブデザインについて考える方法を説明している優れたリソースです。
その他の情報
- A List Apart の プログレッシブ エンハンスメントの理解は、このトピックの入門として適しています。
- Smashing Magazine の プログレッシブ エンハンスメント: 概要と使用方法では、実践的な概要と、より高度なトピックへのリンクを紹介します。
- MDN の 機能検出の実装の記事では、機能を直接クエリして検出する方法について説明しています。
ユーザーはあらゆる画面サイズで PWA を使用でき、そのすべてのコンテンツを任意のビューポート サイズで利用できます。
理由
デバイスにはさまざまなサイズがあり、ユーザーは同じデバイスでもさまざまなサイズでアプリを使用できます。そのため、コンテンツがビューポート内に収まるようにするだけでなく、サイトのすべての機能とコンテンツがすべてのビューポート サイズで使用できるようにすることが重要です。
ユーザーが完了したいタスクやアクセスしたいコンテンツは、ビューポートのサイズによって変わりません。ビューポートのサイズに応じてコンテンツを並べ替えることができますが、いずれにしてもすべて表示する必要があります。実際、Luke Wroblewski 氏の著書「モバイル ファースト」で述べられているように、小さな画面から始めて、大きな画面に合わせてデザインを調整することで、サイトのデザインを改善できます。
モバイル デバイスでは、ソフトウェア開発チームはアプリケーション内の最も重要なデータとアクションにのみ集中する必要があります。320 x 480 ピクセルの画面には、余分な不要な要素を配置するスペースがありません。優先順位を決める必要があります。
方法
レスポンシブ デザインに関するリソースは多数あります。イーサン マルコットのオリジナル記事、それに関連する 重要なコンセプトのコレクション、書籍や講演などです。レスポンシブ デザインのコンテンツ面について詳しくは、 コンテンツ ファーストのデザインと コンテンツ アウト レスポンシブ レイアウトをご覧ください。最後に、モバイルに焦点を当てていますが、Josh Clark の Seven Deadly Mobile Myths の教訓は、モバイル全般と同様に、レスポンシブ サイトの小さなサイズのビューにも関連しています。
ユーザーがオフラインの場合、デフォルトのブラウザのオフライン ページに戻るよりも、PWA 内に留めておく方がシームレスなエクスペリエンスを提供できます。
理由
ユーザーは、インストール済みのアプリが接続状況に関係なく動作することを期待しています。プラットフォーム固有のアプリは、オフラインのときに空白のページを表示することは決してありません。また、PWA はブラウザのデフォルトのオフライン ページを表示してはなりません。ユーザーがキャッシュに保存されていない URL に移動したときと、ユーザーが接続を必要とする機能を使用しようとしたとき、両方でカスタム オフライン エクスペリエンスを提供すると、ウェブ エクスペリエンスが実行されているデバイスの一部のように感じられます。
方法
サービス ワーカーの install イベント中に、ユーザーがオフラインになったときに表示するカスタム オフライン ページをプリキャッシュに保存できます。自分で実装する方法については、オフライン フォールバック ページを作成するをご覧ください。指定しない場合、Chrome は基本的なオフライン ページを表示します。
デバイスにアプリをインストールまたは追加したユーザーは、そのアプリをより頻繁に使用します。
理由
プログレッシブ ウェブアプリをインストールすると、他のインストール済みアプリと同じように表示、操作、動作します。他のアプリを起動する場所から起動します。ブラウザとは別の独自のアプリ ウィンドウで実行され、他のアプリと同様にタスクリストに表示されます。
デバイス固有のアプリと同様に、アプリをインストールしたユーザーは最もエンゲージメントの高いユーザー層です。多くの場合、エンゲージメント指標はモバイル デバイスのアプリユーザーと同等です。こうした指標には、通常のユーザーよりも多くのリピーターが訪れ、サイト滞在時間が長く、コンバージョン率が高いことが含まれます。
方法
PWA をインストール可能にする方法については、インストール可能ガイドをご覧ください。
最適なプログレッシブ ウェブアプリのチェックリスト
クラス最高のアプリのような、本当に優れた PWA を作成するには、コア チェックリスト以上のものが求められます。最適な PWA チェックリストは、ウェブの強みを活かしながら、PWA が実行されているデバイスの一部のように感じさせるものです。
接続が厳密に必要でない場合は、アプリはオンラインとオフラインで同じように動作します。
理由
ユーザーは、カスタム オフライン ページを提供することに加えて、PWA をオフラインで使用できることを期待しています。たとえば、旅行アプリや航空会社アプリでは、オフラインでも旅行の詳細や搭乗券をすぐに利用できるようにする必要があります。音楽、動画、ポッドキャストのアプリは、オフライン再生を可能にする必要があります。ソーシャル アプリとニュースアプリは、ユーザーがオフラインで読めるように、最近のコンテンツをキャッシュに保存する必要があります。ユーザーはオフラインでも認証された状態を維持することを期待しています。そのため、オフライン認証を想定して設計してください。オフライン PWA は、ユーザーに真のアプリのようなエクスペリエンスを提供します。
方法
ユーザーがオフラインで使用できる機能を確認したら、コンテンツをオフライン コンテキストで利用できるようにし、適応させる必要があります。ブラウザ内 NoSQL ストレージ システムである IndexedDB を使用してデータを保存および取得できます。また、バックグラウンド同期を使用して、ユーザーがオフラインで操作できるようにし、ユーザーが安定した接続を再確立するまでサーバー通信を延期できます。サービス ワーカーを使用して、画像、動画ファイル、音声ファイルなどの他の種類のコンテンツをオフライン用に保存したり、安全で長時間のセッションを実装してユーザーの認証を維持したりすることもできます。ユーザー エクスペリエンスの観点から、 スケルトン スクリーンを使用して、読み込み中の速度とコンテンツをユーザーに認識させ、必要に応じてキャッシュに保存されたコンテンツまたはオフライン インジケーターにフォールバックできます。
すべてのユーザー操作が WCAG 2.0 のユーザー補助要件を満たしている。
理由
ほとんどのユーザーは、人生のある時点で、WCAG 2.0 のユーザー補助要件に準拠した方法で PWA を使用したいと考えています。人間が PWA を操作して理解する能力は連続体であり、ニーズは一時的または永続的です。PWA にユーザー補助機能を組み込むことで、すべてのユーザーが PWA を使用できるようになります。
方法
W3C の
ウェブ アクセシビリティの概要から始めることをおすすめします。ユーザー補助テストの大部分は手動で行う必要があります。Lighthouse のユーザー補助機能監査、axe、Accessibility Insights などのツールを使用すると、一部のユーザー補助機能テストを自動化できます。また、a 要素や button 要素など、それらの要素を独自に再作成するのではなく、意味的に正しい要素を使用することも重要です。これにより、より高度な機能を構築する必要がある場合でも、ユーザー補助の要件を満たすことができます（矢印とタブの使用方法など）。A11Y 栄養カードには、一般的なコンポーネントに関する優れたアドバイスが記載されています。
PWA は検索で簡単に見つけられる。
理由
ウェブの最大の利点の一つは、検索を通じてサイトやアプリを見つけられることです。実際、ウェブサイトの全トラフィックの半分以上はオーガニック検索から発生しています。コンテンツに正規 URL が存在し、検索エンジンがサイトをインデックスに登録できるようにすることは、潜在的なユーザーが PWA を見つけられるようにするために重要です。これは、クライアントサイド レンダリングを採用する場合に特に当てはまります。
方法
まず、各 URL に一意のわかりやすいタイトルとメタ ディスクリプションを設定します。次に、Google Search Console と Lighthouse の検索エンジン最適化監査を使用して、PWA の見つけやすさに関する問題をデバッグして修正します。Bing または Yandex のサイト所有者ツールを使用することもできます。また、Schema.org のスキーマを使用して PWA に構造化データを含めることも検討してください。
PWA は、マウス、キーボード、タッチペン、タップなど、どのデバイスでも同じように使用できます。
理由
デバイスにはさまざまな入力方法があり、ユーザーはアプリの使用中にそれらをシームレスに切り替えられる必要があります。同様に重要なのは、入力方法が画面サイズに依存しないようにすることです。つまり、大きなビューポートではタッチをサポートし、小さなビューポートではキーボードとマウスをサポートする必要があります。可能な限り、アプリとそのすべての機能が、ユーザーが選択する可能性のある入力方法の使用をサポートするようにしてください。必要に応じて、入力に固有のコントロール（プルして更新など）も可能になるようにエクスペリエンスを強化します。
方法
Pointer Events API は、さまざまな入力オプションを操作するための統合インターフェースを提供します。タッチペンのサポートを追加する場合に特に適しています。タップとキーボードの両方をサポートするには、正しいセマンティック要素（アンカー、ボタン、フォーム コントロールなど）を使用していて、セマンティック以外の HTML で再ビルドしていないことを確認してください。ホバーで有効になるインタラクションを追加する場合は、クリックまたはタップでも有効にできるようにしてください。
強力な API の使用許可を求める際は、コンテキストを提供し、API が必要な場合にのみ尋ねます。
理由
権限プロンプトをトリガーする API（通知、位置情報、認証情報など）は、オプトインが必要な強力な機能に関連していることが多いため、ユーザーの邪魔になるように意図的に設計されています。ページの読み込み時など、追加のコンテキストなしでこれらのプロンプトをトリガーすると、ユーザーは権限を承認しにくくなり、今後権限を信頼しにくくなります。代わりに、その権限が必要な理由をユーザーにコンテキストに沿って説明した後にのみ、プロンプトをトリガーしてください。
方法
権限の UX の記事と UX Planet の ユーザーに権限をリクエストする正しい方法は、モバイルを重視しながらすべての PWA に適用される権限プロンプトを設計する方法を理解するのに適したリソースです。
コードベースを健全に保つと、目標を達成し、新機能を提供しやすくなります。
理由
最新のウェブ アプリケーションの構築には、多くの作業が必要です。アプリケーションを最新の状態に保ち、コードベースを健全に保つことで、このチェックリストに記載されている他の目標を満たす新機能を簡単に提供できます。
方法
コードベースの健全性を確保するために、優先度の高いチェックがいくつかあります。
- 既知の脆弱性があるライブラリは使用しないでください。
- 非推奨の API を使用していないことを確認します。
- 安全でないコーディング手法（
document.write()の使用や非パッシブなスクロール イベント リスナーなど）をコードベースから削除する - 分析ツールやその他のサードパーティ ライブラリの読み込みに失敗した場合に PWA がクラッシュしないように、防御的なコードを記述することもできます。
- リンティングなどの静的コード分析と、複数のブラウザとリリース チャンネルでの自動テストを必須にすることを検討してください。これらの手法は、エラーが本番環境に到達する前に検出するのに役立ちます。