ウェブアプリ マニフェストは、オペレーティング システムでウェブ コンテンツをアプリとして表示する方法をブラウザに伝えるために作成するファイルです。マニフェストには、アプリの名前、アイコン、テーマカラーなどの基本情報、希望する向きやアプリのショートカットなどの詳細設定、スクリーンショットなどのカタログ メタデータを含めることができます。
各 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 の Inspector と、すべての Chromium ベースのブラウザで DevTools を使用します。
Chromium ブラウザの場合
DevTools での手順
- 左側のペインの [アプリケーション] で、[マニフェスト] を選択します。
- ブラウザで解析されたマニフェストのフィールドを確認します。
Firefox の場合
- Inspector を開きます。
- [Application] タブに移動します。
- 左側のパネルで [Manifest] オプションを選択します。
- ブラウザで解析されたマニフェストのフィールドを確認します。
PWA エクスペリエンスの設計
PWA をマニフェストに接続したら、残りのフィールドに入力して、ユーザー向けのエクスペリエンスを定義します。
基本フィールド
最初の一連のフィールドは、PWA に関する基本情報を表します。これらを使用して、インストールされている PWA のアイコンとウィンドウを作成し、起動方法を決定します。できます。
name- PWA のフルネーム。このアイコンは、オペレーティング システムのホーム画面、ランチャー、ドック、またはメニューにアイコンとともに表示されます。
short_name- 省略可。PWA の短い名前です。
nameフィールドの全値を表示するスペースがない場合に使用します。切り捨てられる可能性を最小限に抑えるため、12 文字以下にしてください。 iconssrc、type、sizes、およびオプションのpurposeフィールドを含むアイコン オブジェクトの配列。PWA を表す画像を記述します。start_url- ユーザーがインストール済みアイコンから 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 ピクセルにする必要があります。ただし、192x192、384x384、1024x1024 ピクセルの画像など、さらに多くのサイズを用意することをおすすめします。
"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 版の Safari、およびほとんどのパソコンのブラウザでは現在、このフィールドは無視されます。
scope- PWA のナビゲーション スコープを変更します。これにより、インストール済みのアプリのウィンドウ内に表示されるものと表示されないものを定義できます。たとえば、サポート範囲外のページにリンクすると、そのページは PWA ウィンドウ内ではなく、アプリ内ブラウザにレンダリングされます。ただし、Service Worker のスコープは変更されません。
次の画像は、PWA のインストール時にデスクトップ デバイスのタイトルバーに theme_color フィールドがどのように使用されるかを示しています。
theme_color や background_color 内など、マニフェストで色を定義する場合は、CSS の名前色（salmon や orange など）、RGB 色（#FF5500 など）、または透明度のない色関数（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 を作成できます。次の動画をご覧ください。
プロモーション フィールドの使用例は次のとおりです。
機能フィールド
最後に、サポートされているブラウザ内で PWA で使用できるさまざまな機能に関連するフィールドがいくつかあります。たとえば、機能に関する章で説明しているように、shortcuts、share_target、display_overrides フィールドなどです。また、related_apps や prefer_related_apps（詳しくは検出のチャプターを参照）などのフィールドもあります。これらのフィールドを使用して、通常はアプリストアから PWA をインストール済みアプリに接続します。
今後、ブラウザにプログレッシブ ウェブアプリに機能が追加されるのに伴い、多くの新しい項目が追加される可能性があります。