優れたプログレッシブ ウェブアプリとは

パフォーマンスの高いサイトは、パフォーマンスの低いサイトよりもユーザーを惹きつけ、維持できるため、パフォーマンスはあらゆるオンライン エクスペリエンスの成功において重要な役割を果たします。ユーザー中心のパフォーマンス指標の最適化に重点を置いてください。

理由

ユーザーにアプリを使用利用してもらうには、スピードが不可欠です。実際、ページの読み込み時間が 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 の 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 イベント中に、後で使用できるようにカスタムのオフライン ページを事前キャッシュに保存できます。ユーザーがオフラインになった場合、キャッシュに保存されているカスタム オフライン ページを使用して応答できます。カスタムのオフライン ページのサンプルでは、実際の動作例と実装方法を確認できます。

デバイスにアプリをインストールまたは追加したユーザーは、そのアプリへのエンゲージメントが高い傾向にあります。

理由

プログレッシブ ウェブアプリをインストールすると、他のインストール済みのアプリと同様にデザイン、動作、動作ができるようになります。ユーザーが他のアプリを起動するのと同じ場所から起動します。ブラウザとは別のアプリ ウィンドウで実行され、他のアプリと同様にタスクリストに表示されます。

デバイス固有のアプリと同様に、アプリをインストールしたユーザーは最もエンゲージメントの高いオーディエンスであり、多くの場合、モバイル デバイス上のアプリユーザーと同等のエンゲージメント指標を持っています。これらの指標には、通常のユーザーよりもリピート訪問が多い、サイト滞在時間が長い、コンバージョン率が高いなどがあります。

方法

PWA をインストール可能にする方法については、インストール可能ガイドをご覧ください。

接続が厳密には必要でない場合、アプリはオフラインでもオンラインの場合と同じように動作します。

理由

ユーザーは、カスタムのオフライン ページを提供するだけでなく、PWA がオフラインで使用できることを期待します。たとえば、旅行アプリや航空会社のアプリでは、ルートの詳細や搭乗券をオフラインでもすぐに利用できるようにする必要があります。音楽、動画、ポッドキャストのアプリでは、オフライン再生ができるようにする必要があります。ソーシャル アプリやニュースアプリでは、ユーザーがオフラインで読めるように、最近のコンテンツをキャッシュに保存する必要があります。ユーザーはオフライン時も認証が維持されることを前提としているため、オフライン認証向けに設計します。オフライン PWA は、真のアプリのようなエクスペリエンスをユーザーに提供します。

方法

ユーザーがオフラインでの使用を想定している機能を決定したら、コンテンツを利用可能にしてオフラインの状況に適応できるようにする必要があります。ブラウザ内 NoSQL ストレージ システムである IndexedDB を使用してデータの保存と取得を行うことができます。また、バックグラウンド同期を使用すると、ユーザーはオフライン中に操作を実行でき、ユーザーの接続が安定するまでサーバーの通信を遅らせることができます。また、Service Worker を使用して、画像、動画ファイル、音声ファイルなど、他の種類のコンテンツをオフラインで使用できるように保存し、安全で長時間継続するセッションを実装してユーザーの認証を維持することもできます。ユーザー エクスペリエンスの観点から、 スケルトン画面を使用すると、読み込み中の速度とコンテンツをユーザーに感じてもらうことができ、必要に応じてキャッシュに保存されたコンテンツやオフライン インジケーターにフォールバックできます。

すべてのユーザー操作は、WCAG 2.0 のユーザー補助要件を遵守します。

理由

ほとんどのユーザーは、人生のある時点で PWA を WCAG 2.0 のユーザー補助要件で定められた方法で使用したいと考えています。人間が PWA を操作、理解する能力は一定の範囲に存在しており、ニーズが一時的または永続的である場合があります。PWA をアクセシブルにすることで、誰もが利用できるようになります。

方法

まずは、W3C の Introduction to Web Accessibility をご覧ください。ユーザー補助機能テストの大部分は手動で行う必要があります。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 が破損しないように、防御的なコードを記述することもできます。
• lint チェックなどの静的コード分析や、複数のブラウザやリリース チャンネルでの自動テストの必要性を検討してください。これらの手法は、本番環境に投入される前にエラーを検出するのに役立ちます。