ウェブアプリマニフェスト

ウェブアプリマニフェストは、 Web Application Manifest 仕様書で定義されており、ウェブアプリケーションについての情報を提供する JSON テキストファイルです。

ウェブアプリマニフェストの最も一般的な用途は、ブラウザーがプログレッシブウェブアプリ (PWA) を端末にインストールする際に必要な情報（アプリ名やアイコンなど）を提供することです。

ウェブアプリケーションマニフェストには、単一の JSON オブジェクトが含まれており、最も上位のキーは「メンバー」と呼ばれています。

メンバー

この節では、マニフェストに記載される可能性のあるメンバーを紹介します。

すべてのメンバーは仕様上は任意ですが、用途によっては一部のメンバーの存在が必要になる場合があります。例えば、 PWA では特定のマニフェストメンバーを提供する必要があります。

メモ: dir、lang、iarc_rating_id の各メンバーは実装されていません。

マニフェストの例

json
{
  "short_name": "MDN",
  "name": "MDN Web Docs",
  "icons": [
    {
      "src": "/favicon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/favicon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

マニフェストの展開

ウェブアプリマニフェストは、文書の <head> 内の <link> 要素を使用して HTML ページから展開されます。

html
<link rel="manifest" href="manifest.json" />

.webmanifest の拡張子が仕様書の Media type registration の節で指定されています（マニフェストファイルのレスポンスは Content-Type: application/manifest+json を返してください）。ブラウザーは一般に .json (Content-Type: application/json) のような他の適切な拡張子でもマニフェストに対応します。

マニフェストへのアクセスに資格情報が必要な場合は、マニフェストファイルが現在のページと同じオリジンにあったとしても、 crossorigin 属性を use-credentials に設定する必要があります。

html
<link rel="manifest" href="/app.webmanifest" crossorigin="use-credentials" />

スプラッシュ画面

ブラウザーやオペレーティングシステムによっては、インストール済みの PWA を起動するとスプラッシュ画面が表示される場合があります。このスプラッシュ画面は自動的に生成され、その外観はウェブアプリマニフェストのメンバー、具体的には下記のものによって定義されます。

ブラウザーの互換性

Report problems with this compatibility data on GitHub
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
background_color
description
display
display.browser
display.fullscreen
display.minimal-ui
display.standalone
display_override
Experimental
tabbed display mode
Experimental
window-controls-overlay display mode
Experimental
file_handlers
Experimental
icons
id
launch_handler
Experimental
launch_handler.client_mode
Experimental
name
note_taking
Experimental
note_taking.new_note_url
Experimental
orientation
prefer_related_applications
Experimental
protocol_handlers
Experimental
protocol_handlers.protocol
Experimental
protocol_handlers.url
Experimental
related_applications
Experimental
scope
serviceworker
ExperimentalNon-standard
serviceworker.scope
ExperimentalNon-standard
serviceworker.src
ExperimentalNon-standard
serviceworker.use_cache
ExperimentalNon-standard
share_target
Experimental
short_name
shortcuts
start_url
theme_color

Tip: you can click/tap on a cell for more information.

Full support
Partial support
No support
Experimental. Expect behavior to change in the future.
Non-standard. Check cross-browser support before using.
See implementation notes.
Has more compatibility info.

関連情報