アプリのショートカットを使用すると、ユーザーが頻繁に必要とするいくつかの一般的な操作にすばやくアクセスできます。
ユーザーの生産性を向上させ、重要なタスクへの再エンゲージメントを促進するため、ウェブ プラットフォームでアプリ ショートカットがサポートされるようになりました。ウェブ デベロッパーは、ユーザーが頻繁に必要とする一般的なアクションにすばやくアクセスできるようにすることができます。
この記事では、アプリのショートカットを定義する方法について説明します。また、関連するベスト プラクティスについても学びます。
アプリのショートカットについて
アプリのショートカットを使用すると、ユーザーはウェブアプリで一般的なタスクやおすすめのタスクをすばやく開始できます。アプリアイコンが表示されている場所から、それらのタスクに簡単にアクセスできるため、生産性が向上し、ウェブアプリに対するエンゲージメントも高まります。
アプリのショートカット メニューを開くには、ユーザーのデスクトップにあるタスクバー(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
プロパティを含める必要があります。ウェブアプリ マニフェスト アイコンとは異なり、image のtype
は省略可能です。執筆時点では、SVG ファイルはサポートされていません。代わりに PNG を使用してください。ピクセル単位で正確なアイコンが必要な場合は、48dp 単位で指定します(36x36、48x48、72x72、96x96、144x144、192x192 ピクセルのアイコンなど)。それ以外の場合は、192 x 192 ピクセルの単一のアイコンを使用することをおすすめします。
品質基準として、アイコンは 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 では、ドックのショートカット メニューのアイコンはサポートされていません。アプリ ショートカットごとに異なる名前を使用します。
アプリのショートカットの使用状況を測定する
分析を目的として、start_url
の場合と同様に、アプリのショートカットの url
エントリにアノテーションを付ける必要があります(例: url:
"/my-shortcut?utm_source=homescreen"
)。
ブラウザ サポート
アプリのショートカットは、下記のプラットフォームとバージョンで使用できます。
Trusted Web Activity のサポート
Bubblewrap は、Trusted Web Activity を使用する Android アプリのビルドに推奨されるツールです。ウェブアプリ マニフェストからアプリ ショートカットを読み取り、Android アプリに対応する構成を自動的に生成します。アプリ ショートカットのアイコンは必須であり、Bubblewrap では 96 x 96 ピクセル以上である必要があります。
PWABuilder は、プログレッシブ ウェブアプリを信頼できるウェブとアプリのアクティビティに簡単に変換できる優れたツールです。アプリのショートカットをサポートしていますが、いくつかの注意点があります。
Trusted Web Activity を Android アプリに手動で統合する場合は、Android アプリのショートカットを使用して同じ動作を実装できます。
サンプル
アプリ ショートカットのサンプルとそのソースをご覧ください。
関連情報
- MDN
- 仕様
- アプリ ショートカットのサンプル | アプリ ショートカットのサンプルソース
- 点滅コンポーネント:
UI>Browser>WebAppInstalls