プログレッシブ ウェブアプリ（PWA）は、最新の API を使用して構築および強化されており、機能、信頼性、インストール性を強化し、単一のコードベースであらゆるデバイス、あらゆる場所、あらゆるユーザーにリーチできます。可能な限り最適なエクスペリエンスを実現するため、コアと最適なチェックリストと推奨事項を使用してください。
コア プログレッシブ ウェブアプリのチェックリスト
プログレッシブ ウェブアプリのチェックリストでは、サイズや入力タイプに関係なく、すべてのユーザーがアプリをインストールして使用できるようにするための要件について説明しています。
パフォーマンスは、オンライン エクスペリエンスの成功に重要な役割を果たします。パフォーマンスの高いサイトは、パフォーマンスの低いサイトよりもユーザーを惹きつけ、維持します。ユーザー中心のパフォーマンス指標の最適化に重点を置きます。
理由
ユーザーにアプリを使用利用してもらうには、スピードが不可欠です。実際、ページの読み込み時間が 1 秒から 10 秒に増えると、ユーザーが直帰する確率は 123% 増加します。パフォーマンスは load イベントでも停止しません。ユーザーが、ボタンのクリックなどの操作が登録されたかどうかを疑う必要は決してありません。スクロールとアニメーションがスムーズである必要があります。
パフォーマンスは、アプリの動作とユーザーの認識の両方において、エクスペリエンス全体に影響します。
アプリケーションごとにニーズは異なりますが、Lighthouse のパフォーマンス監査は Core Web Vitals に基づいており、これらの監査で高いスコアを獲得できれば、ユーザーが快適に利用できる可能性が高くなります。PageSpeed Insights や Chrome ユーザー エクスペリエンス レポートを使用して、ウェブアプリの実際のパフォーマンス データを取得することもできます。
方法
読み込み時間の短縮に関するガイドに沿って、PWA をすばやく起動し、すばやく利用できるようにする方法をご確認ください。
ユーザーは、インストール前であれば、どのブラウザでもウェブアプリにアクセスできます。
理由
Progressive Web App はまずウェブアプリであるため、ブラウザ間で動作する必要があります。
そのための効果的な方法は、Resilient Web Design の Jeremy Keith 氏によれば、中核となる機能を特定し、可能な限りシンプルな技術を使用してそれらの機能を利用できるようにして、可能な限りユーザー エクスペリエンスを向上させることです。多くの場合、HTML のみを使用してコア機能を作成し、CSS と JavaScript を使用してユーザー エクスペリエンスを強化し、より魅力的なエクスペリエンスを実現します。
フォームの送信を例に考えてみましょう。これを実装する最も簡単な方法は、POST リクエストを送信する HTML フォームを使用することです。これを構築したら、JavaScript でフォームの検証を行い、AJAX でフォームを送信するようにしましょう。これにより、サポートできるユーザーの利便性を向上させることができます。
ユーザーは、さまざまなデバイスやブラウザでサイトにアクセスします。その範囲の頂点だけをターゲットにすることはできません。機能検出を使用して、まだ存在しないブラウザやデバイスを使用しているユーザーを含む、可能な限り幅広い潜在的ユーザーに有用なエクスペリエンスを提供します。
方法
Jeremy Keith 氏の Resilient Web Design は、このクロスブラウザのプログレッシブな方法論でウェブデザインについて考える方法を説明している優れたリソースです。
その他の情報
- このトピックの冒頭部分は、List Apart の Understanding Progressive Enhancement です。
- 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 内に留めておく方がシームレスなエクスペリエンスを提供できます。
理由
ユーザーは、接続ステータスに関係なく、インストール済みのアプリが動作することを期待します。プラットフォーム固有のアプリは、オフラインのときに空白のページを表示することは決してありません。また、PWA はブラウザのデフォルトのオフライン ページを表示してはなりません。ユーザーがキャッシュに保存されていない URL に移動したときや、接続が必要な機能を使用しようとしたときも、カスタムのオフライン エクスペリエンスを提供することで、ウェブ エクスペリエンスを実行中のデバイスの一部のように感じられます。
方法
Service Worker の install イベント中に、ユーザーがオフラインになったときに表示するカスタム オフライン ページをプリキャッシュできます。自分で実装する方法については、オフライン フォールバック ページを作成するをご覧ください。指定しない場合、Chrome は基本的なオフライン ページを表示します。
デバイスにアプリをインストールまたは追加したユーザーは、そのアプリをより頻繁に使用します。
理由
Progressive Web App をインストールすると、他のインストール済みアプリと同じように動作し、見た目や操作感も同じになります。他のアプリを起動する場所から起動します。ブラウザとは別の独自のアプリ ウィンドウで実行され、他のアプリと同様にタスクリストに表示されます。
デバイス固有のアプリと同様に、アプリをインストールしたユーザーは最もエンゲージメントの高いオーディエンスであり、多くの場合、モバイル デバイス上のアプリユーザーと同等のエンゲージメント指標を持っています。これらの指標には、通常のユーザーよりもリピート訪問が多い、サイト滞在時間が長い、コンバージョン率が高いなどがあります。
方法
PWA をインストール可能にする方法については、インストール可能ガイドをご覧ください。
最適なプログレッシブ ウェブアプリのチェックリスト
クラス最高のアプリのような優れた PWA を作成するには、基本チェックリスト以上のものが必要です。最適な PWA チェックリストは、ウェブの強みを活かしながら、PWA が実行されているデバイスの一部のように感じさせるものです。
接続が厳密には必要でない場合、アプリはオフラインでもオンラインの場合と同じように動作します。
理由
ユーザーは、カスタムのオフライン ページを提供するだけでなく、PWA がオフラインで使用できることを期待します。たとえば、旅行アプリや航空会社のアプリでは、ルートの詳細や搭乗券をオフラインでもすぐに利用できるようにする必要があります。音楽、動画、ポッドキャスト アプリは、オフライン再生を可能にする必要があります。ソーシャル アプリとニュースアプリは、ユーザーがオフラインで読めるように、最近のコンテンツをキャッシュに保存する必要があります。ユーザーはオフラインでも認証が維持されることを期待しています。そのため、オフライン認証を想定して設計してください。オフライン PWA は、ユーザーにアプリのようなエクスペリエンスを提供します。
方法
ユーザーがオフラインでの使用を想定している機能を決定したら、コンテンツを利用可能にしてオフラインの状況に適応できるようにする必要があります。ブラウザ内 NoSQL ストレージ システムである IndexedDB を使用してデータの保存と取得を行うことができます。また、バックグラウンド同期を使用すると、ユーザーはオフライン中に操作を実行でき、ユーザーの接続が安定するまでサーバーの通信を遅らせることができます。サービス ワーカーを使用して、画像、動画ファイル、音声ファイルなどの他の種類のコンテンツをオフライン用に保存したり、安全で長時間のセッションを実装してユーザーの認証を維持したりすることもできます。ユーザー エクスペリエンスの観点から、 スケルトン画面を使用すると、読み込み中の速度とコンテンツをユーザーに感じてもらうことができ、必要に応じてキャッシュに保存されたコンテンツやオフライン インジケーターにフォールバックできます。
すべてのユーザー操作は、WCAG 2.0 のユーザー補助要件を遵守します。
理由
ほとんどのユーザーは、人生のある時点で PWA を WCAG 2.0 のユーザー補助要件で定められた方法で使用したいと考えています。人間が PWA を操作して理解する能力は連続体であり、ニーズは一時的または永続的です。PWA をアクセシブルにすることで、誰もが利用できるようになります。
方法
W3C のウェブ アクセシビリティの概要から始めることをおすすめします。ユーザー補助テストの大部分は手動で行う必要があります。Lighthouse のユーザー補助機能の監査、Axe、ユーザー補助分析情報などのツールを使用すると、ユーザー補助機能のテストを自動化できます。また、a 要素や button 要素など、そのような要素を独自に再作成するのではなく、意味的に正しい要素を使用することも重要です。これにより、より高度な機能を構築する必要がある場合に、ユーザー補助機能の要件（矢印とタブのどちらを使用するかなど）を満たすことができます。一部の共通要素については、A11Y Nutrition Cards に関するアドバイスが優れています。
PWA は検索で簡単に検出できます。
理由
ウェブの最大の利点の一つは、検索を通じてサイトやアプリを見つけられることです。実際、ウェブサイトのトラフィック全体の半分以上がオーガニック検索から発生しています。見込み顧客に PWA を見つけてもらうには、コンテンツの正規 URL が存在し、検索エンジンがサイトをインデックスに登録できることが重要です。これは、クライアントサイド レンダリングを採用する場合に特に当てはまります。
方法
まず、各 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 が破損しないように、防御的なコードを記述することもできます。
- リンティングなどの静的コード分析と、複数のブラウザとリリース チャンネルでの自動テストを必須にすることを検討してください。これらの手法は、エラーが本番環境に到達する前に検出するのに役立ちます。