アプリのショートカットを使用すると、ユーザーが頻繁に必要とするいくつかの一般的な操作にすばやくアクセスできます。
ユーザーの生産性を向上させ、主要なタスクへの再エンゲージメントを促進するために、ウェブ プラットフォームでアプリのショートカットがサポートされるようになりました。これにより、ウェブ デベロッパーは、ユーザーが頻繁に必要とするいくつかの一般的なアクションにすばやくアクセスできます。
この記事では、アプリのショートカットを定義する方法について説明します。さらに、関連するベスト プラクティスについても学びます。
アプリのショートカットについて
アプリのショートカットを使用すると、ユーザーはウェブアプリで一般的なタスクやおすすめのタスクをすばやく開始できます。アプリアイコンが表示されている場所から、それらのタスクに簡単にアクセスできるため、生産性が向上し、ウェブアプリに対するエンゲージメントも高まります。
アプリのショートカット メニューを開くには、ユーザーのデスクトップにあるタスクバー（Windows）またはドック（macOS）のアプリアイコンを右クリックするか、Android の場合はアプリのランチャー アイコンを長押しします。
アプリのショートカット メニューは、ユーザーのデスクトップまたはモバイル デバイスにインストールされているプログレッシブ ウェブアプリの場合にのみ表示されます。「PWA について学ぶ」モジュールのインストールで、インストール要件をご確認ください。
アプリの各ショートカットはユーザーの意図を表し、それぞれがウェブアプリのスコープ内の URL に関連付けられます。ユーザーがアプリのショートカットを有効にすると、URL が開きます。アプリのショートカットの例は以下のとおりです。
- 最上位のナビゲーション項目（ホーム、タイムライン、最近の注文など）
- 検索
- データ入力のタスク（メールやツイートの作成、領収書の追加など）
- アクティビティ（最も人気のある連絡先とのチャットを開始するなど）
ウェブアプリ マニフェストでアプリ ショートカットを定義する
アプリ ショートカットは、必要に応じてウェブアプリ マニフェストで定義されます。これは、ウェブアプリと、ユーザーのデスクトップまたはモバイル デバイスにインストールされたときのアプリの動作をブラウザに伝える JSON ファイルです。より具体的には、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 配列の各メンバーは、少なくとも 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 単位をピクセル単位に変換する式から取得されます）。
アプリのショートカットをテストする
アプリのショートカットが正しく設定されていることを確認するには、DevTools の [Application] パネルにある [Manifest] ペインを使用します。
このペインには、アプリのショートカットなど、マニフェストのプロパティの多くが人が読める形式で表示されます。これにより、すべてのショートカット アイコンが提供されていれば、それが適切に読み込まれていることを簡単に確認できます。
プログレッシブ ウェブアプリの更新は 1 日 1 回に制限されているため、アプリのショートカットはすべてのユーザーがすぐに使用できるとは限りません。詳しくは、Chrome によるウェブアプリ マニフェストの更新の処理方法をご覧ください。
ベスト プラクティス
アプリのショートカットを優先度順に並べる
ショートカットは、マニフェストで定義した順序で表示されます。 アプリのショートカットの表示数の制限はプラットフォームによって異なるため、アプリのショートカットを優先度順に並べることをおすすめします。たとえば Windows 版 Chrome と Edge では、アプリのショートカットの数は 10 個に制限されていますが、Android 版 Chrome では 3 個しか表示されません。Android 7 の Chrome 92 より前では、4 つでした。Chrome 92 では、サイト設定へのショートカットが追加され、アプリで使用可能なショートカット スロットの 1 つが使用されるようになりました。
個別のアプリ ショートカット名を使用する
常に表示されるとは限らないため、アイコンによってアプリのショートカットを区別しないでください。たとえば、macOS では Dock のショートカット メニューのアイコンはサポートされていません。アプリのショートカットごとに個別の名前を使用する。
アプリのショートカットの使用状況を測定する
分析を目的として、start_url の場合と同様に、アプリのショートカットの url エントリにアノテーションを付ける必要があります（例: url:
"/my-shortcut?utm_source=homescreen"）。
ブラウザ サポート
アプリのショートカットは、下記のプラットフォームとバージョンで使用できます。
Trusted Web Activity のサポート
バブルラップは、信頼できるウェブ アクティビティを使用する Android アプリを作成するための推奨ツールです。ウェブアプリ マニフェストからアプリ ショートカットを読み取り、Android アプリに対応する構成を自動的に生成します。アプリのショートカットのアイコンは必須であり、バブルラップには 96 x 96 ピクセル以上である必要があります。
PWABuilder は、プログレッシブ ウェブアプリを信頼できるウェブとアプリのアクティビティに簡単に変換できる優れたツールです。アプリのショートカットをサポートしていますが、いくつかの注意点があります。
信頼できるウェブ アクティビティを Android アプリに手動で統合するデベロッパーは、Android アプリのショートカットを使用して同じ動作を実装できます。
サンプル
アプリのショートカットのサンプルとそのソースをご確認ください。
関連情報
- MDN
- 仕様
- アプリ ショートカットのサンプル | アプリ ショートカットのサンプルソース
- Blink コンポーネント:
UI>Browser>WebAppInstalls