PWA のベスト プラクティス

  • [アーティクル]

この記事では、PWA をユーザーに最適なアプリケーションにするためのベスト プラクティスを示します。 ユーザーがアプリケーションをインストールすると、オフラインで作業したり、オペレーティング システムに深く統合したり、簡単ではないコンピューティング タスクを実行したりするなど、これらのアプリケーションで何ができるかについて一定の期待があります。

PWA をユーザーが期待する外観にするためのベスト プラクティスについては、このページの記事を参照してください。

このページでは、既に PWA があることを前提としています。 最初に単純な PWA を構築する方法の詳細については、「プログレッシブ Web Appsの概要」を参照してください。

カスタム インストールを提供する

「プログレッシブ Web Appsの概要」の手順に従っている場合は、ブラウザー アドレス バーの [使用可能なアプリ] ボタンを使用してアプリを既にインストールできます。

アプリ のユーザー インターフェイスでのカスタム インストール エクスペリエンスは、ユーザーに対してより明確になり、より多くのインストールにつながる可能性があります。

カスタム インストール エクスペリエンスを作成するには、イベントを beforeinstallprompt 使用し、アプリに独自のインストール ボタンを指定します。

イベントのコード例をbeforeinstallprompt確認するには、PWAmp デモ アプリのソース コードをチェックします。 カスタム インストールをテストするには、PWAmp を開き、[その他のツール] (...) > [アプリのインストールについて>] をクリックします。

アプリ ストアに送信する

多くのユーザーは、デバイスのアプリ ストアでアプリを探します。 公式アプリ ストアからダウンロードすると、ユーザーにとって信頼できる使い慣れたエクスペリエンスが提供されます。

PWA ビルダーを使用して、Windows 用 Microsoft Store、iOS 用アプリ ストア、または Android 用 Play ストアに PWA を発行できます。

PWA Builder を使用して Microsoft Store に発行する方法については、「Microsoft Store に プログレッシブ Web アプリを発行する」を参照してください。

優れたアプリ アイコンを作成する

多くのユーザーは、自分のアイコンでデバイス上のアプリを見つけます。 ユーザーがアプリをより簡単に見つけられるように、認識可能なアイコンを選択し、目立っていることを確認し、アプリがインストールされているデバイスに適応していることを確認します。

Windows では、タスク バー、スタート メニュー、 Alt + Tab タスク スイッチャーなど、さまざまな場所にアプリ アイコンが表示されます。 複数の画像サイズを指定して、これらの場所でアプリ アイコンを簡単に認識できるようにします。

Windows で必要なイメージ サイズについては、「アイコンとテーマの色を定義する」の「アイコンイメージのサイズ」を参照してください。

スタンドアロン アプリ ウィンドウを使用する

ネイティブ アプリケーションには、独自の専用ウィンドウがあります。 PWA は、ホスト オペレーティング システムでの表示方法を定義できます。

ブラウザー ナビゲーション ユーザー インターフェイスのないスタンドアロン ウィンドウで PWA を表示するには、Web アプリ マニフェスト ファイルの 表示 メンバーを使用して、 に standalone設定します。

アプリに複数の HTML ページがある場合は、ユーザーがアプリ内のボタンまたはリンクを使用してページ間を移動できることを確認します。 マニフェスト メンバーの値をminimal-uidisplay使用して、ユーザーがアプリ タイトル バーのブラウザーによってレンダリングされた前のボタンと次のボタンを使用してページ間を移動できるようにします。

よりイマーシブでネイティブに似たエクスペリエンスを作成するために、 デスクトップ PWA は既定のオペレーティング システム タイトル バーを非表示にして、代わりに独自のコンテンツを表示することもできます。 タイトル バーが通常どおり表示されるコンテンツを表示すると、PWA がネイティブ アプリのように感じるのに役立ちます。 Visual Studio Code、Microsoft Teams、Microsoft Edge などの多くのデスクトップ アプリケーションでは、既にこれを行っています。

タイトル バーを置き換える方法については、「タイトル バー にコンテンツを表示する」を参照してください。

オペレーティング システムに統合する

ユーザーは、インストールされているアプリケーションが何らかの方法でホスト オペレーティング システムと統合することを期待しています。

アプリは、ショートカット、アプリ間の共有、badging、ファイル処理、リンク処理などのオペレーティング システム統合機能を使用することで、より使い慣れた魅力的でシームレスなエクスペリエンスを提供できます。

ショートカット

ショートカットを使用すると、アプリ アイコンを右クリックして、アプリ機能への直接リンクを定義できます。

「 アプリのショートカットを定義する」を参照してください。

アプリ共有

PWA は、オペレーティング システムの共有ダイアログを使用して、他のアプリとコンテンツを共有したり、他のアプリからコンテンツを受信したりできます。

「 他のアプリとコンテンツを共有する」を参照してください。

アイコン バッジ

PWA は、アプリ アイコンに状態バッジを表示して、アプリに新しいコンテンツが存在することをユーザーに警告できます。

「バッジ、通知、プッシュ メッセージを使用してユーザーを再エンゲージメントする」の「アプリ アイコンにバッジを表示する」を参照してください。

ファイル処理

PWA を特定のファイルの種類のファイル ハンドラーとして登録できます。

PWA ファイル ハンドラー機能を使用して、オペレーティング システム内のユーザーが特定のファイルを開いたときにアプリを自動的に起動します。

「プログレッシブ Web Appsでファイルを処理する」を参照してください。

アプリの登録は、特定のリンクが他のアプリケーションで使用されている場合にアプリを自動的に起動するためのリンクまたはプロトコル ハンドラーです。

「プログレッシブ Web Appsへのリンクを処理する」と「プログレッシブ Web Appsでプロトコルを処理する」を参照してください。

ウィジェット

試験的な機能

Windows 11 ウィジェット ボードなどのオペレーティング システム ウィジェット ダッシュボードに表示する独自のアプリ ウィジェットを作成します。

「PWA ドリブン ウィジェットを構築する」を参照してください。

オフライン シナリオをサポートする

低速または信頼性の低いネットワークに接続されている場合、またはインターネットにアクセスできない場合でも、通常、インストールされているアプリケーションを開いて使用できます。 インストールされているアプリケーションのユーザーは、これらの条件下で引き続き動作することを期待しています。 また、アプリケーションのネットワークに依存する部分が、カスタム メッセージとローカル キャッシュ機能との接続の欠如を適切に処理することを期待しています。

リテンション期間を向上させるには、サービス ワーカー Fetch と Cache API、ローカル データ ストレージ アクセスを使用し、ユーザーに優れたオフライン エクスペリエンスを提供します。

いくつかの手順で優れたオフライン エクスペリエンスを提供できます。

  1. アプリを起動し、コンテンツを表示し、ユーザーが最も一般的なタスクを実行するために必要なすべての静的リソースをキャッシュします。
  2. キャッシュできないページのカスタム オフライン ページにリダイレクトします。
  3. インターネットアクセスなしでは使用できないアプリのタスクを適切に処理します。
  4. ユーザーがオフラインで表示するためにデータをダウンロードできるようにするなどの高度なシナリオを実装します。

詳細については、「 Service Worker を使用してネットワーク要求を管理する」を参照してください。

データをローカルに格納する

ユーザーに豊富で高速なエクスペリエンスを提供するには、次のような PWA で使用できるさまざまな永続的なデータ ストレージ オプションを使用します。

  • アプリの静的リソースを格納するために、ストレージをキャッシュします。
  • 少量のユーザー データを格納するためのローカル ストレージとセッション ストレージ。
  • IndexedDB:大規模で構造化されたユーザー データを格納します。
  • ファイル システム アクセス API。ディスクにファイルを格納します。

詳細については、「 デバイスにデータを格納する」を参照してください。

高度な機能を使用する

通常、インストールされているアプリは、Web サイトが通常サポートしていない高度なコンピューティング シナリオを実行します。

アプリのようなエクスペリエンスを提供するには、次のような高度な Web 機能を使用します。

すべてのブラウザーとデバイスでアプリの最も重要なタスクを実行できることを確認します。 「複数のブラウザーとデバイスでテストする」を参照してください。

アプリを実際のアプリのように見せてみましょう

ユーザーは、特定のタスクを達成するためにデバイスにアプリをインストールし、これらのタスクをユーザー インターフェイスでどのように表示するか、ホスト オペレーティング システムに統合する方法について一定の期待を持っています。

ユーザーがアプリの最も重要なタスクを簡単かつ使い慣れた方法で達成できるようにするには、次のような設計の選択を行います。

  • Web サイトのように、他のページへのナビゲーションに大きなヘッダー領域を使用しないでください。 代わりにメニューのメタファーを使用します。
  • Web サイトのような大きなフッター領域を使用して、より多くのリンクや情報を得ないでください。
  • フォントを system-ui 使用して、コンテンツのネイティブ感を高め、読み込みを高速化します。
  • より少ないリンクを使用し、より大きなヒットターゲットを好みます。
  • prefers-color-scheme CSS メディア機能を使用して、オペレーティング システムの明るいテーマと暗いテーマをサポートします。
  • と を background-colortheme-colorWeb アプリ マニフェスト に指定して、アプリケーション ウィンドウをカスタマイズします。
  • 最も重要なタスクに焦点を当て、コンテンツを整理し、ユーザー インターフェイスを合理化します。
  • CSS グリッド、 Flexbox、 Media クエリ、 レスポンシブ イメージを使用して、デバイスのフォーム ファクターに基づいてユーザー インターフェイスを再整理します。
  • ユーザー操作をすぐに登録することで、認識されるパフォーマンスを向上させます。
  • 次 の画面 のレンダリングに時間がかかる場合は、スケルトン画面の使用を検討してください。

複数のブラウザーとデバイスでテストする

プログレッシブ Web Appsを使用すると、1 つのコードベースから、すべてのデバイス用のアプリを配信できます。 アプリがどこでも動作することを確認するには、複数のブラウザー、オペレーティング システム、デバイスでテストします。

アプリの最も重要なシナリオがどこでも機能することを確認し、サポート デバイスのエクスペリエンスを段階的に強化します。

複数の環境でアプリをテストするには、次の手法を検討してください。

ディープ リンクのサポート

Web とソーシャル メディアを介したアプリの検出と共有を向上させるには、アプリの各ページを一意の URL にルーティングし、 ディープ リンクをサポートします。