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