使い方
- 名前と短い名前を入力し、続けてアプリの開始URLとスコープを入力します。
- 表示モードを選び、背景色とテーマの色を16進数の色で入力します。
- アイコンの下に、アイコンを1行に1つずつ書きます。アドレス、サイズ、種類、用途の順に、縦線で区切ります。
- manifest.webmanifestの下のテキストを保存し、インストールの確認に示された警告を1つずつ直します。
各メンバーの意味
マニフェストはJSONファイルです。そのメンバーは、W3CのWeb Application Manifestの1節に説明されています。入力したメンバーだけが書かれるため、空欄のメンバーは含まれません。表示モードは、アプリをブラウザでどう見せるかを決めます。ブラウザがそのモードに対応していない場合は、次の順に従います(6節):全画面、スタンドアロン、最小限のUI、ブラウザ。
ページと別のオリジンにある開始URLは、仕様が同じオリジンを求めているため無視されます。スコープは、開始URLを含む場合にだけ使われます。含まない場合、ブラウザは開始URLからファイル名、クエリ、フラグメントを除いた場所をスコープとして使います。
警告が確認すること
MDNは、Chromium系ブラウザがアプリのインストールを勧める前に必要とするメンバーを挙げています。名前か短い名前、192pxと512pxのアイコン、開始URL、表示モードです。また、サイトはhttpsで配信するか、localhostから配信する必要があり、サービスワーカーは必須ではないとしています。Firefoxは、デスクトップではマニフェストファイルからウェブアプリをインストールしません。
このツールは、上のメンバーとスコープの規則を確認します。アイコンのファイル、HTTPSのアドレス、ページのリンクは確認しません。それらは、ご自身で確かめてください。
初期値の場合
ページが開く初期値で、マニフェストは下のメンバーを持ちます。名前、開始URL、2つのアイコンのサイズがそろっているため、確認に警告は表示されません。
| メンバー | 値 |
|---|---|
| name、short_name | メモ帳、メモ |
| start_url、scope | /、/ |
| display | standalone |
| background_color、theme_color | #ffffff、#1f6feb |
| icons | 192x192と512x512のPNGファイル。512のアイコンは用途 any maskable |
よくある質問
マニフェストのファイルは、どこに保存しますか?
サイトのルートか、アプリのフォルダに保存し、名前は manifest.webmanifest にします。そのあと、MDNが説明するように、アプリのすべてのページから、relがmanifestのlink要素でリンクします。
アプリをインストールするには、サービスワーカーが必要ですか?
いいえ。MDNは、サービスワーカーがPWAのインストール可能であるための要件ではないとしています。多くのアプリはオフラインで動かすためにサービスワーカーを使いますが、必須ではありません。サイトは、依然としてhttpsで配信するか、localhostから配信する必要があります。
どのアイコンのサイズが必要ですか?
MDNは、Chromium系ブラウザには192pxと512pxのアイコンを挙げています。サイズは幅x高さで書き、1つのファイルに複数ある場合は空白で区切ります。SVGファイルなら、サイズはanyにできます。
短い名前と名前は、何が違いますか?
名前はアプリの完全な名前です。短い名前は、ホーム画面のアイコンの下の表示など、スペースが少ない場所に使われます。少なくとも一方を入力してください。両方が空だと、このツールは警告します。
なぜ、ツールはスコープについて警告するのですか?
スコープは、開始URLを含む場合にだけ使われます(W3C、1節)。開始URLがスコープの外にあると、ブラウザはスコープを無視して既定のスコープを使うため、アプリが意図した範囲の外で開くことがあります。
出典
- W3C(英語): Web Application Manifest (Working Draft, 6 November 2026): sections 1, 2 and 6
- MDN(英語): Making PWAs installable
- MDN(英語): display member of the web app manifest
- MDN(英語): icons member of the web app manifest
数値と文章の最終確認日:2026年11月10日火曜日。