ウェブアプリ マニフェストは、ウェブ コンテンツをオペレーティング システムでアプリとして表示する方法を指定するファイルです。マニフェストには、アプリの名前、アイコン、テーマカラーなどの基本情報、希望する画面の向きやアプリのショートカットなどの高度な設定、スクリーンショットなどのカタログ メタデータを含めることができます。
各 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 の場合
- インスペクタを開きます。
- [アプリケーション] タブに移動します。
- 左側のパネルで [マニフェスト] オプションを選択します。
- ブラウザによって解析されたマニフェストのフィールドを確認します。
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 コレクションに追加すると、サポートされているデバイスでの操作性が向上します。
"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 は、アイコンのマスク可能なバージョンをテストして作成できる無料のオンライン ツールです。
アイコンが一般的な目的で、マスク可能な場合は、purpose フィールドを "any maskable" に設定できます。詳しくは、MDN ウェブアプリ マニフェスト ドキュメントをご覧ください。
推奨フィールド
次に含めるフィールドは、インストールには必須ではありませんが、ユーザー エクスペリエンスを向上させるものです。
theme_color- アプリのデフォルトの色。OS によるサイトの表示方法（デスクトップのウィンドウとタイトルバーの色、モバイル デバイスのステータスバーの色など）に影響することがあります。この色は、HTML
theme-color<meta>要素でオーバーライドできます。 background_color- スタイルシートが読み込まれる前に、アプリの背景に表示するプレースホルダの色。現在、iOS と iPadOS の Safari とほとんどのパソコン用ブラウザでは、このフィールドは無視されます。
scope- PWA のナビゲーション スコープを変更し、インストールされたアプリのウィンドウ内に表示する内容と表示しない内容を定義できます。たとえば、スコープ外のページにリンクすると、PWA ウィンドウではなくアプリ内ブラウザでレンダリングされます。ただし、サービス ワーカーのスコープに変更はありません。
次の画像は、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 を表示できます。
プロモーション フィールドの実際の動作については、以下をご覧ください。
機能フィールド
最後に、サポートされているブラウザで PWA が使用できるさまざまな機能に関連するフィールドがいくつかあります。機能の章で説明する shortcuts、share_target、display_override フィールドなどです。また、related_apps や prefer_related_apps などのフィールド（詳しくは検出の章をご覧ください）もあり、PWA をインストール済みのアプリ（多くの場合、アプリストアから）に接続できます。
ブラウザでプログレッシブ ウェブアプリの機能が追加されるにつれて、今後、多くの新しいフィールドが追加される可能性があります。