ウェブアプリマニフェストは、 JSON 形式のファイルでアプリケーションについての情報 (名前、作者、アイコン、説明など) を提供するものです。マニフェストは機器のホーム画面にインストールされたウェブサイトの詳細を通知し、ユーザーによりすばやいアクセスと、より豊かな使い勝手を提供します[要出典]

ウェブアプリマニフェストは、進歩的ウェブアプリと呼ばれる一連のウェブ技術の一部であり、これはアプリストアを通さずに機器のホーム画面にインストールすることができ、オフライン作業やプッシュ通知の受け取りなどのその他の可能性を持ったウェブサイトです。

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

<link rel="manifest" href="/manifest.webmanifest">

メモ: .webmanifest の拡張子が仕様書の Media type registration の節で指定されていますが、ブラウザーは一般に .json のような他の適切な拡張子でマニフェストに対応します。

マニフェストの例

{
  "name": "HackerWeb",
  "short_name": "HackerWeb",
  "start_url": ".",
  "display": "standalone",
  "background_color": "#fff",
  "description": "A simply readable Hacker News app.",
  "icons": [{
    "src": "images/touch/homescreen48.png",
    "sizes": "48x48",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen72.png",
    "sizes": "72x72",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen96.png",
    "sizes": "96x96",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen144.png",
    "sizes": "144x144",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen168.png",
    "sizes": "168x168",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen192.png",
    "sizes": "192x192",
    "type": "image/png"
  }],
  "related_applications": [{
    "platform": "play",
    "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
  }]
}

メンバー

background_color

ウェブサイトの期待される「背景色」を定義します。この値はサイトの CSS で既に利用できるものを繰り返すものですが、スタイルシートが読み込まれる前にマニフェストが有効になった時、ブラウザーが簡易的に背景色を描くために利用することがあります。これによって、ウェブアプリケーションの起動からサイトのコンテンツの読み込みまでが円滑に推移できるようになります。

"background_color": "red"

メモ: background_color は指定されたサイトを読み込む間の見栄えを改善するためだけに意味があり、進歩的ウェブアプリのスタイルシートが利用できるときにユーザーエージェントが背景色として利用されることはありません。

description

指定されたウェブサイトが何をするのかについての一般的な説明を提供します。

"description": "このアプリは町中で最高の食べ物を見つけるのに役立ちます。"

dir

name, short_name, description の各メンバーの主なテキストの書字方向を指定します。 lang メンバーと共に、右から左に記述する言語の正しい表示に役立ちます。

"dir": "rtl",
"lang": "ar",
"short_name": "أنا من التطبيق!"

以下の値のいずれか一つを取ります。

  • ltr (左から右)
  • rtl (右から左)
  • auto (テキストの書字方向について最適な推測をするために、 Unicode の双方向アルゴリズムを使用するようブラウザーに示唆する)

メモ: 値が省略された場合の既定値は auto です。

display

ウェブサイトで開発者が推奨する表示モードを定義します。

"display": "standalone"

有効な値は次の通りです。

表示モード 説明 表示モードのフォールバック
fullscreen 利用可能な表示エリアがすべて使用され、ユーザーエージェント (chrome) は表示されません。 standalone
standalone アプリケーションはスタンドアロンアプリケーションのようなルック&フィールになります。これはアプリケーションが別なウィンドウを持ったり、アプリケーションの起動に独自のアイコンを持ったりすることが含まれます。このモードでは、ユーザーエージェントはナビゲーションの制御のための UI 要素を非表示にしますが、ステータスバーのようなそのほかの UI を表示することはできます。 minimal-ui
minimal-ui アプリケーションはスタンドアロンアプリケーションのようなルック&フィールになりますが、ナビゲーション制御のための最小限の UI 要素が表示されます。この要素はブラウザーによって異なります。 browser
browser アプリケーションは、ブラウザーとプラットフォームに応じて、従来のブラウザータブまたは新しいウィンドウで開きます。これが既定です。 (なし)

メモ: display-mode メディア特性を使用して、アプリの表示モードに基づいて選択的に CSS を適用することができます。これは、 URL からサイトを起動したり、デスクトップのアイコンから起動したりした時の使い勝手の一貫性を提供するために利用することができます。

icons

様々な場面に応じて、アプリケーションのアイコンとして機能する画像ファイルの配列を指定します。例えば、他のアプリケーションのリストの中でそのウェブアプリケーションを表すために使用したり、ウェブアプリケーションを OS のタスク切り替えやシステム設定に統合したりするために使用することができます。

"icons": [
  {
    "src": "icon/lowres.webp",
    "sizes": "48x48",
    "type": "image/webp"
  },
  {
    "src": "icon/lowres",
    "sizes": "48x48"
  },
  {
    "src": "icon/hd_hi.ico",
    "sizes": "72x72 96x96 128x128 256x256"
  },
  {
    "src": "icon/hd_hi.svg",
    "sizes": "72x72"
  }
]

画像オブジェクトは次の値を含むかもしれません。

メンバー 説明
sizes 画像の寸法を空白区切りで含む文字列。
src 画像ファイルへのパス。 src が相対 URL の場合、基底 URL はマニフェストのある URL になります。
type 画像のメディアタイプについてのヒント。このメンバーの目的は、ユーザーエージェントが対応していないメディアタイプの画像をすばやく無視できるようにすることです。

lang

nameshort_name の各メンバーの値で、第一の言語を指定します。この値は単一の言語タグを含む文字列です。

"lang": "en-US"

name

サイトがユーザーに表示されるときに使われる、人間が読める名前を提供します。例えば、他のアプリケーションのリストやアイコンのラベルとして使用されます。

"name": "Google I/O 2017" 

orientation

すべてのウェブサイトの最上位の閲覧コンテキストにおける既定の向きを定義します。

​​"orientation": "portrait-primary"

向きは以下の値のうち一つを取ります。

  • any
  • natural
  • landscape
  • landscape-primary
  • landscape-secondary
  • portrait
  • portrait-primary
  • portrait-secondary

真偽値で指定し、ブラウザーに対して、ウェブアプリケーションよりも推奨される特定のネイティブアプリケーション (下記参照) が利用できることをユーザーに示すかどうかの示唆になります。これは、ウェブサイトが提供できないことを、関連するネイティブアプリが実際に提供できる場合にのみ使用してください。

"prefer_related_applications": false

メモ: 省略した場合、既定値は false です。

基礎となるプラットフォームでインストール可能、またはアクセス可能なネイティブアプリケーションの配列です。 — 例えば、 Google Play ストアから入手できるネイティブのアンドロイドアプリケーションなどです。このようなアプリケーションはウェブサイトの代わりに、類似/同等の機能を提供することを意図しています。 — ウェブサイトのネイティブアプリ版のようなものです。

"related_applications": [
  {
    "platform": "play",
    "url": "https://play.google.com/store/apps/details?id=com.example.app1",
    "id": "com.example.app1"
  }, {
    "platform": "itunes",
    "url": "https://itunes.apple.com/app/example-app1/id123456789"
  }]

アプリケーションオブジェクトは次の値を含んでいる可能性があります。

メンバー 説明
platform アプリケーションが見つかるプラットフォームです。
url アプリケーションが見つかる URL です。
id 指定のプラットフォームでアプリケーションを表すために使用される ID です。

scope

このウェブサイトのコンテキストにおける、ナビゲーション範囲を定義します。これはマニフェストが適用されているときに、表示することができるウェブページを制限します。ユーザーがこの範囲の外に移動しようとすると、ブラウザーのタブやウィンドウ内の普通のウェブページに戻ります。

scope が相対 URL の場合、基底 URL はマニフェストの URL になります。

"scope": "/myapp/"

short_name

アプリケーションの人が読める短い名前を提供します。機器のホームスクリーンのように、ウェブアプリケーションの完全な名前を表示するための十分な領域がないときに使用するためのものです。

"short_name": "I/O 2017"

start_url

ユーザーが (ホーム画面に追加された場合など) アプリケーションを起動したときに読み込む URL で、通常はインデックスページです。なお、これはマニフェストの URL からの相対 URL である必要があります。

"start_url": "./?utm_source=web_app_manifest"

theme_color

アプリケーションの既定のテーマ色を定義します。これは OS がサイトを表示する方法に影響を与えることがあります (例えば、アンドロイドのタスク切り替えでは、サイトがテーマ色で囲まれます)。

"theme_color": "aliceblue"

スプラッシュ画面

Chrome 47 以降では、ホーム画面からサイトが起動されるとスプラッシュ画面が表示されます。スプラッシュ画面はウェブアプリマニフェストのプロパティから、具体的には以下のように自動生成されます。

  • name
  • background_color
  • icons の配列中のアイコンで、機器の 128dpi に最も近いもの。

     

MIME タイプ

マニフェストは、 application/manifest+json MIME タイプを使用して提供するべきです。しかし、これは任意です。

仕様書

仕様書 状態 備考
Web App Manifest 草案 初回定義

ブラウザーの対応

現在、互換性データを可読形式の JSON フォーマットに置き換えているところです。 この互換性一覧は古い形式を使っており、これに含まれるデータの置き換えが済んでいません。 手助けしていただける場合は、こちらから!

昨日 Android Android Webview Firefox モバイル (Gecko) IE モバイル Opera モバイル Safari モバイル Android 版 Chrome
基本対応 未サポート 39.0 ? ? 32.0 ? 39.0
background_color 未サポート 46.0[1] ? ? (有) ? 46.0 [1]
theme_color 未サポート 46.0[1] ? ? 未サポート ? 46.0 [1]
ホーム画面に追加機能に使用される icons, name, short_name, theme_color ? (有) 53.0 (53)[2] ? 未サポート ? (有)
display ? (有) 47.0 (47)[3] 未サポート ? ? (有)
機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本対応 39.0 未サポート 未サポート 未サポート 未サポート

[1] langscope には対応していません。

[2] (もしあれば) ウェブアプリマニフェストicons, name, short_name, theme_color の各フィールドが、「ホーム画面へ追加」で (それぞれ) ホーム画面やアプリのウィンドウのアイコン、アプリのウィンドウのタイトル、ホームスクリーンのアイコンのタイトル、アプリのウィンドウ色のソースになります (Firefox モバイルのみ、 バグ 1234558 を参照)。この機能の実験的な対応は、 about:config の真偽値フラグ manifest.install.enabled で隠されています。

[3] displaybrowser 値は47でのみ対応していました。 minimal-ui, standalone , fullscreen は Firefox 57 で追加されました。

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, mottox2, east-pmo, sujiniku, YuichiNukiyama
最終更新者: mfuji09,