アプリのショートカットで操作をすばやく完了

アプリのショートカットを使用すると、ユーザーが頻繁に必要とするいくつかの一般的な操作にすばやくアクセスできます。

François Beaufort

Jungkee Song

ユーザーの主要なタスクへの再エンゲージメントを促進し、 ウェブ プラットフォームがアプリのショートカットをサポートするようになりました。ウェブ デベロッパーは、 ユーザーが頻繁に必要とする、いくつかの一般的な操作にすばやくアクセスできます。

この記事では、アプリのショートカットを定義する方法について説明します。また 関連するベスト プラクティスについて学習します。

アプリのショートカットについて

アプリのショートカットを使用すると、Google Chat 内で一般的なタスクやおすすめのタスクを簡単に開始できます。 できます。アプリアイコンが表示されていればどこからでも簡単にタスクにアクセスできるため、 ユーザーのウェブ エンゲージメントの向上に役立っています。 。

アプリのショートカット メニューは、タスクバーのアプリアイコンを右クリックして呼び出す （Windows）またはドック（macOS）をタップするか、アプリケーションの ランチャー アイコン（Android 用）

<ph type="x-smartling-placeholder">

</ph>

<ph type="x-smartling-placeholder">

</ph>

アプリのショートカット メニューは、次の要件があるプログレッシブ ウェブアプリの場合にのみ表示されます。 インストールされている必要があります設置方法をご確認ください。 「Learn PWA」をご覧くださいモジュールへようこそ。

アプリの各ショートカットはユーザーの意図を表現し、それぞれがユーザーの意図と ウェブアプリのスコープ内の URL。ユーザーが有効にすると URL が開く クリックします。アプリのショートカットの例は以下のとおりです。

• 最上位のナビゲーション項目（ホーム、タイムライン、最近の注文など）
• 検索
• データ入力のタスク（メールやツイートの作成、領収書の追加など）
• アクティビティ（最も人気のある連絡先とのチャットを開始するなど）

ウェブアプリ マニフェストでアプリ ショートカットを定義する

アプリ ショートカットは、必要に応じてウェブアプリ マニフェストで定義されます。これは、 ブラウザは、ウェブアプリとその動作を インストールされている必要があります具体的には shortcuts 配列メンバーで宣言されます。以下は、 ウェブアプリ マニフェストの例。

{
  "name": "Player FM",
  "start_url": "https://player.fm?utm_source=homescreen",
  …
  "shortcuts": [
    {
      "name": "Open Play Later",
      "short_name": "Play Later",
      "description": "View the list of podcasts you saved for later",
      "url": "/play-later?utm_source=homescreen",
      "icons": [{ "src": "/icons/play-later.png", "sizes": "192x192" }]
    },
    {
      "name": "View Subscriptions",
      "short_name": "Subscriptions",
      "description": "View the list of podcasts you listen to",
      "url": "/subscriptions?utm_source=homescreen",
      "icons": [{ "src": "/icons/subscriptions.png", "sizes": "192x192" }]
    }
  ]
}

shortcuts 配列の各メンバーは、少なくとも 1 つのテーブルを含む name と url。他のメンバーは省略可能です。

name

アプリのショートカットに付けられる、人が読める形式のラベル。 ユーザーに表示されます

short_name（任意）

スペースが限られている場合に使用される、人が読める形式のラベル。おすすめの方法 保存されても、 省略可。

description（任意）

人間が読める形式の、アプリのショートカットの目的。 このドキュメントの作成時点では使用されていませんが、支援技術にさらされる可能性があります 使用できます。

url

ユーザーがアプリを有効化したときに開く URL できます。この URL は、ウェブアプリ マニフェストのスコープ内に存在する必要があります。もし 相対 URL の場合、ベース URL はウェブアプリ マニフェストの URL になります。

icons（任意）

画像リソース オブジェクトの配列。各オブジェクトは src プロパティと sizes プロパティが含まれている。ウェブアプリ マニフェストのアイコンとは異なり、 画像の type は省略可能です。このドキュメントの作成時点では、SVG ファイルはサポートされていません。 代わりに PNG を使用してください。

ピクセル パーフェクトなアイコンを使用する場合は、48 dp 単位で指定します（例: 36x36、 （48x48、72x72、96x96、144x144、192x192 ピクセルのアイコン）。それ以外の場合は、 192x192 ピクセルのアイコンを 1 つ使用することです

品質の目安として、アイコンはデバイスの理想的なサイズの半分以上 Android は 48 dp です。たとえば、xxhdpi の画面で表示するには、アイコン 72 x 72 ピクセル以上である必要があります（これは dp 単位をピクセル単位に変換する数式）

アプリのショートカットをテストする

アプリのショートカットが正しく設定されていることを確認するには、Google Chat の [Manifest] ペインを使用します。 DevTools の [Application] パネル

</ph>

このペインでは、マニフェストの多くの情報が人が読める形式で表示されます。 プロパティ（アプリのショートカットなど）も参照できます。こうすることで、既存のすべてのルールが ショートカット アイコンが提供されていれば、正しく読み込まれます。

プログレッシブはアプリ ショートカットであるため、すべてのユーザーがすぐに ウェブアプリの更新は 1 日 1 回に制限されています。詳細情報: ウェブアプリ マニフェストの更新に対する Chrome での処理方法をご覧ください。

ベスト プラクティス

アプリのショートカットを優先度順に並べる

ショートカットは、マニフェストで定義した順序で表示されます。 アプリのショートカットは優先度順に並べることをおすすめします。 表示されるアプリのショートカットの数はプラットフォームによって異なります。Chrome と Edge（オン） たとえば Windows では、Chrome for Education のショートカットの数が 10 個に制限され、 Android はディスプレイ 3 のみ。Android 7 の Chrome 92 より前では、4 つでした。Chrome 92 はサイト設定にショートカットを追加し、利用可能なショートカットの 1 つを スロットを定義します。

個別のアプリ ショートカット名を使用する

アプリのショートカットを区別するためにアイコンに依存しないでください。アイコンは正しくない場合があります。 表示されます。たとえば、macOS は Dock 内のアイコンに対応していません アクセスできます。アプリのショートカットごとに個別の名前を使用する。

アプリのショートカットの使用状況を測定する

次のように、アプリのショートカットの url エントリにアノテーションを付ける必要があります。 分析を目的とした start_url（例: url: "/my-shortcut?utm_source=homescreen"）。

ブラウザ サポート

アプリのショートカットは、下記のプラットフォームとバージョンで使用できます。

</ph>

Trusted Web Activity のサポート

バブルラップは、信頼できるウェブ アプリケーションを使用する Android アプリを構築するための推奨ツールです。 アクティビティで、ウェブアプリ マニフェストからアプリのショートカットを読み取り、 Android アプリに対応する構成を生成します。なお、 アプリのショートカットは必須で、96 x 96 ピクセル以上 バブルラップ。

PWABuilder: プログレッシブ ウェブアプリを信頼できるアプリに簡単に変換できる優れたツール ウェブ アクティビティは、アプリのショートカットをサポートしていますが、いくつかの注意点があります。

Trusted Web Activity を Android に手動で統合するデベロッパー向け Android アプリのショートカットを使用して、同じものを実装することもできます。 サポートします。

サンプル

アプリのショートカットのサンプルとそのソースをご確認ください。

関連情報

• MDN
• 仕様
• アプリのショートカットのサンプル |アプリ ショートカットのサンプルソース
• Blink コンポーネント: UI>Browser>WebAppInstalls