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