ウェブアプリ マニフェストは、ウェブコンテンツをオペレーティング システムでアプリとして表示する方法を指定するファイルです。マニフェストには、アプリの名前、アイコン、テーマカラーなどの基本情報、希望する画面の向きやアプリのショートカットなどの高度な設定、スクリーンショットなどのカタログ メタデータを含めることができます。
各 PWA には、アプリケーションごとに 1 つのマニフェストを含める必要があります。通常はルートフォルダにホストされ、PWA をインストールできるすべての HTML ページにリンクされます。公式の拡張子は .webmanifest であるため、マニフェストの名前は app.webmanifest などにします。
PWA にウェブアプリ マニフェストを追加する
ウェブアプリ マニフェストを作成するには、まず、文字列値の name フィールドが少なくとも 1 つ含まれている JSON オブジェクトを含むテキスト ファイルを作成します。
app.webmanifest:
{
"name": "My First Application"
}
ただし、ファイルを作成するだけでは不十分です。ブラウザがファイルの存在を認識する必要があります。
マニフェストへのリンク
ブラウザにウェブアプリ マニフェストを認識させるには、すべての PWA の HTML ページで <link> HTML 要素を使用し、rel 属性を manifest に設定して PWA にリンクする必要があります。これは、CSS スタイルシートをドキュメントにリンクする方法に似ています。
index.html:
<html lang="en">
<title>This is my first PWA</title>
<link rel="manifest" href="/app.webmanifest">
マニフェストのデバッグ
マニフェストが正しく設定されていることを確認するには、Firefox のインスペクタと、すべての Chromium ベースのブラウザの DevTools を使用します。
Chromium ブラウザの場合
DevTools で
- 左側のペインの [Application] で、[Manifest] を選択します。
- ブラウザによって解析されたマニフェストのフィールドを確認します。
Firefox の場合
- Inspector を開きます。
- [アプリケーション] タブに移動します。
- 左側のパネルで [マニフェスト] オプションを選択します。
- ブラウザによって解析されたマニフェストのフィールドを確認します。
PWA エクスペリエンスの設計
PWA がマニフェストに接続されたら、残りのフィールドに入力してユーザー エクスペリエンスを定義します。
基本フィールド
最初の一連のフィールドは、PWA に関する基本情報を表します。これらは、インストールされた PWA のアイコンとウィンドウをビルドし、起動方法を決定するために使用されます。それらは次のとおりです。
name- PWA のフルネーム。アイコンとともに、オペレーティング システムのホーム画面、ランチャー、ドック、またはメニューに表示されます。
short_name- 省略可。PWA の短い名前。
nameフィールドの値をすべて表示するのに十分なスペースがない場合に使用します。切り捨てられる可能性を最小限に抑えるため、12 文字未満にしてください。 iconssrc、type、sizes、オプションのpurposeフィールドを含むアイコン オブジェクトの配列。PWA を表す画像を記述します。start_url- ユーザーがインストール済みのアイコンから PWA を起動したときに読み込む URL。絶対パスの使用が推奨されます。そのため、PWA のホームページがサイトのルートである場合は、これを「/」に設定するとアプリの起動時に開くことができます。開始 URL を指定しない場合、ブラウザは PWA がインストールされた URL を開始 URL として使用できます。ホーム画面ではなく、商品の詳細など、ディープリンクにすることもできます。
displayfullscreen、standalone、minimal-ui、browserのいずれか。OS が PWA ウィンドウを描画する方法を表します。さまざまな表示モードについて詳しくは、アプリの設計の章をご覧ください。大部分のユースケースではstandaloneが実装されます。id- 同じオリジンでホストされている他の PWA と区別するために、この PWA を一意に識別する文字列。設定されていない場合は、
start_urlが代替値として使用されます。なお、後からstart_urlを変更すると（クエリ文字列値の変更など）、PWA がすでにインストールされていることをブラウザで検出できなくなる可能性がありますのでご注意ください。
アイコン
PWA のアイコンは、インストール時にユーザーのデバイス全体でそのビジュアル アイデンティティとなるため、少なくとも 1 つは定義することが重要です。icons プロパティはアイコン オブジェクトのコレクションであるため、さまざまな形式で複数のアイコンを定義して、ユーザーに最適なアイコン エクスペリエンスを提供できます。各ブラウザは、ニーズとインストールされているオペレーティング システムに基づいて、必要な仕様に近いアイコンを 1 つ以上選択します。
アイコンサイズを 1 つだけ選択する場合は、512 x 512 ピクセルにする必要があります。ただし、192 x 192、384 x 384、1,024 x 1,024 ピクセルの画像など、複数のサイズを指定することをおすすめします。
"icons": [
{
"src": "icons/512.png",
"type": "image/png",
"sizes": "512x512"
},
{
"src": "icons/1024.png",
"type": "image/png",
"sizes": "1024x1024"
}
]
アイコンを指定していない場合や、アイコンが推奨サイズでない場合、一部のプラットフォームではインストール基準を満たさない可能性があります。他のプラットフォームでは、PWA のスクリーンショットから、または汎用アイコンを使用して、アイコンが自動的に生成されます。
マスク可能なアイコン
Android などの一部のオペレーティング システムでは、アイコンがさまざまなサイズや形状に適応します。たとえば Android 12 では、メーカーや設定によって、アイコンの形状が円から四角、角丸四角に変わることがあります。このようなアダプティブ アイコンをサポートするには、purpose フィールドを使用してマスク可能なアイコンを指定します。
これを行うには、メインのアイコンが「セーフゾーン」内に収まる正方形の画像ファイルを指定します。セーフゾーンとは、アイコンの中央にある直径がアイコンの幅の 40% の円形のことです。（下の画像を参照）。マスク可能なアイコンをサポートしているデバイスでは、必要に応じてアイコンがマスクされます。
以下に、よく使用されるさまざまな形状でレンダリングされた、マスク可能なアイコンの例を示します。
次の画像で、左側のアイコンをマスク可能なアイコンとして使用すると、シェイプマスクが適用されたときにデバイスでのパフォーマンスが低下します。
この画像は、パディングを増やすことで使用可能になります。
マスク可能なアイコンは 512 x 512 以上にする必要があります。作成したアプリを icons コレクションに追加することで、対応デバイスの利便性を高めることができます。
"icons": [
{
"src": "/icons/512.png",
"type": "image/png",
"sizes": "512x512"
},
{
"src": "/icons/1024.png",
"type": "image/png",
"sizes": "1024x1024"
},
{
"src": "/icons/512-maskable.png",
"type": "image/png",
"sizes": "512x512",
"purpose": "maskable"
},
]
ほとんどの場合、マスク可能なアイコンが正しく表示されない場合は、パディングを追加することで改善できます。Maskable.app は、アイコンのマスク可能なバージョンをテストして作成できる無料のオンライン ツールです。
推奨フィールド
次に追加するフィールド セットは、インストール性に必須ではないものの、ユーザー エクスペリエンスを向上させるフィールドです。
theme_color- アプリのデフォルトの色。OS によるサイトの表示方法（デスクトップのウィンドウとタイトルバーの色、モバイル デバイスのステータスバーの色など）に影響することがあります。この色は、HTML
theme-color<meta>要素でオーバーライドできます。 background_color- スタイルシートが読み込まれる前にアプリの背景に表示されるプレースホルダの色。iOS 版、iPadOS 版、およびほとんどのパソコンのブラウザでは、現在このフィールドは無視されます。
scope- PWA のナビゲーション スコープを変更し、インストール済みアプリのウィンドウ内に表示されるものとできないものを定義できます。たとえば、スコープ外のページにリンクすると、そのページは PWA ウィンドウ内ではなく、アプリ内ブラウザにレンダリングされます。ただし、これによって Service Worker のスコープは変更されません。
次の図は、PWA をインストールするときに、デスクトップ デバイスのタイトルバーに theme_color フィールドがどのように使用されるかを示しています。
theme_color や background_color など、マニフェスト内で色を定義する場合は、salmon や orange などの CSS 指定のカラー、#FF5500 などの RGB カラー、rgb() や hsl() などの透明度のないカラー関数を使用する必要があります。詳しくは、アプリの設計に関する章をご覧ください。
試してみる
スプラッシュ画面
一部のデバイスでは、PWA の読み込み中に静的な画像がレンダリングされ、ユーザーに即時フィードバックが提供されます。
Android は、theme_color、background_color、icon の値を使用してスプラッシュ画面を生成します。
Android に PWA をインストールすると、次の図のように、マニフェストから取得した情報を含むスプラッシュ画面がデバイスによって生成されます。
一方、iOS と iPadOS の Safari では、ウェブアプリ マニフェストを使用してスプラッシュ画面を生成しません。代わりに、アイコンの処理と同様に、独自の <link> 要素からリンクされた画像を使用します。詳しくは、機能強化の章をご覧ください。
拡張フィールド
次の一連のフィールドに、PWA に関する追加情報が表示されます。これらはすべてオプションです。
lang- マニフェストの値の主要言語を指定する言語タグ（英語の場合は
en、ブラジル ポルトガル語の場合はpt-BR、ヒンディー語の場合はinなど）。 dir- 方向対応のマニフェスト フィールド（
name、short_name、descriptionなど）を表示する方向。有効な値はauto、ltr（左から右）、rtl（右から左）です。 orientation- インストール後のアプリの希望する画面の向き。ゲームでは、横向きのみをリクエストするように設定できます。複数の値を指定できますが、通常は明示的に
portraitまたはlandscapeを指定します。
プロモーション フィールド
4 つ目のフィールド セットでは、PWA に関するプロモーション情報（インストール フロー、リスティング、検索結果など）を指定できます。
description- PWA の機能の説明。
screenshots- PWA を表示するためのスクリーンショット オブジェクトの配列（
src、type、sizesを含む）（iconsオブジェクトに似ています）。サイズの制限はありません。 categories- リスティングのヒントとして使用される PWA が属するカテゴリの配列（必要に応じて、既知のカテゴリのリストから）。通常、これらの値は小文字で指定します。
iarc_rating_id- PWA の International Age Rating Coalition 認証コード（該当する場合）。これは、PWA がどの年齢層に適しているかを判断するために使用することを目的としています。
これらのプロモーション フィールドは、今すぐご利用いただけます。たとえば Android では、PWA がインストール可能で、description フィールドと screenshots フィールドの少なくとも 1 つに値を指定すると、インストール ダイアログがシンプルな [ホーム画面に追加] 情報バーから、アプリストアのものと同様の豊富なインストール ダイアログに変わります。
Android では、次の動画に示すように、プロモーション フィールドに値を指定すると、より見やすいインストール UI を表示できます。
プロモーション フィールドの実際の動作については、以下をご覧ください。
機能フィールド
最後に、機能の章で説明する shortcuts、share_target、display_override フィールドなど、サポートされているブラウザで PWA が使用できるさまざまな機能に関連するフィールドがいくつかあります。また、related_apps や prefer_related_apps などのフィールド（詳しくは検出の章をご覧ください）もあり、PWA をインストール済みのアプリ（多くの場合、アプリストアから）に接続できます。
今後、多くの新しいフィールドが登場する可能性があります。また、ブラウザでプログレッシブ ウェブアプリの機能も追加される可能性があります。