ウェブアプリ マニフェストはユーザーが作成するファイルで、オペレーティング システムでウェブ コンテンツをアプリとして表示する方法をブラウザに指示します。マニフェストには、アプリの名前、アイコン、テーマの色などの基本情報を含めることができます。詳細設定（画面の向き、アプリのショートカットなど）スクリーンショットなどのカタログのメタデータ
各 PWA には、アプリケーションごとにマニフェストが 1 つ含める必要があります。マニフェストは通常、ルートフォルダにホストされ、PWA のインストール元となるすべての HTML ページにリンクされています。公式の拡張子は .webmanifest であるため、マニフェストには app.webmanifest などの名前を付けることができます。
ウェブアプリ マニフェストを PWA に追加する
ウェブアプリ マニフェストを作成するには、まず、文字列値の name フィールドが少なくとも 1 つ含まれている JSON オブジェクトを含むテキスト ファイルを作成します。
app.webmanifest:
{
"name": "My First Application"
}
しかし、ファイルを作成するだけでは不十分です。ブラウザもファイルが存在することを認識する必要があります。
マニフェストへのリンク
ウェブアプリ マニフェストをブラウザが認識できるようにするには、PWA のすべての HTML ページで <link> HTML 要素と manifest に設定した rel 属性を使用して、PWA マニフェストにリンクする必要があります。これは、CSS スタイルシートをドキュメントにリンクする方法と似ています。
index.html:
<html lang="en">
<title>This is my first PWA</title>
<link rel="manifest" href="/app.webmanifest">
マニフェストのデバッグ
マニフェストが正しく設定されていることを確認するには、すべての Chromium ベースのブラウザで Firefox のインスペクタと DevTools を使用します。
Chromium ブラウザの場合
DevTools
- 左側のペインの [アプリケーション] で、[マニフェスト] を選択します。
- ブラウザで解析されたマニフェストのフィールドを確認します。
Firefox の場合
- Inspector を開きます。
- [アプリケーション] タブに移動します。
- 左側のパネルで [マニフェスト] オプションを選択します。
- ブラウザで解析されたマニフェストのフィールドを確認します。
PWA エクスペリエンスの設計
PWA をマニフェストに接続したら、残りのフィールドに入力して、ユーザー エクスペリエンスを定義します。
基本フィールド
最初の一連のフィールドは、PWA に関する基本情報を表します。これらを使用して、インストール済みの PWA のアイコンとウィンドウを作成し、起動方法を決定します。それらは次のとおりです。
name- PWA のフルネーム。アイコンとともに、オペレーティング システムのホーム画面、ランチャー、ドック、またはメニューに表示されます。
short_name- （省略可）PWA の短縮名。
nameフィールドの値を表示するのに十分なスペースがない場合に使用されます。文字切れの可能性を最小限に抑えるため、12 文字以下にしてください。 iconssrc、type、sizes、オプションのpurposeフィールドを含むアイコン オブジェクトの配列。PWA を表す画像を記述します。start_url- ユーザーがインストール済みのアイコンから PWA を起動したときに PWA が読み込まれる URL。絶対パスが推奨されるため、PWA のホームページがサイトのルートである場合は、この値を「/」に設定します。アプリを起動時に開くことができます。開始 URL を指定しない場合、ブラウザは PWA のインストール元 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、1024 x 1024 ピクセルのサイズの画像など、より多くのサイズを用意することをおすすめします。
"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 フィールドに値を指定すると、インストール ダイアログ エクスペリエンスはシンプルな「ホーム画面に追加」から変化します。情報バーから、アプリストアのプロンプトに似た、より充実したインストール ダイアログが表示されます。
Android では、次の動画に示すように、プロモーション フィールドに値を指定すると、インストール UI が改善されます。
プロモーション フィールドの使用例:
Capabilities フィールド
最後に、サポートされているブラウザで使用できる PWA 別の機能に関連するフィールドがいくつかあります。たとえば、機能に関する章で説明した shortcuts、share_target、display_overrides の各フィールドがあります。また、related_apps や prefer_related_apps（詳しくは検出の章を参照）などのフィールドもあり、インストール済みのアプリ（通常はアプリストアから入手）に PWA を接続できます。
将来的には多くの新しいフィールドが登場する可能性があります。また、ブラウザでプログレッシブ ウェブアプリの機能も追加される可能性があります。