Web App Manifest

Web App Manifest は、シンプルなドキュメントでアプリケーションの（名前や著者、アイコン、説明のような）情報を提供します。主な目的は、プログレッシブ Web アプリ を作ることにあります： プログレッシブ Web アプリとは、（オフラインで利用でき、アプリケーションのコンテンツが変更された場合にはプッシュ通知できるような、そのほかのスーパーパワーとともに）ユーザーがアプリストアを経由することなくデバイスのホームスクリーンにインストールできる Web アプリケーションのことです。

マニフェスト例

{
  "name": "Google I/O 2015",
  "short_name": "I/O 2015",
  "start_url": "./?utm_source=web_app_manifest",
  "display": "standalone",
  "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": "web"
  }, {
    "platform": "play",
    "url": "https://play.google.com/store/apps/details?id=com.google.samples.apps.iosched"
  }]
}

メンバー

background_color

Web アプリケーションの予想される背景色を定義します。この値はすでにアプリケーションのスタイルシートで使用可能なものを繰り返しますが、スタイルシートがロードされる前にマニフェストが利用可能になったときに、Web アプリケーションの背景色を描画するためにブラウザで使用できます。これは、Web アプリケーションの起動からコンテンツのロードまでの推移を滑らかにします。

"background_color": "red"

description

Web アプリケーションが何を実行するかの一般的な説明を提供します。

"description": "The app that helps you find the best food in town!"

dir

name メンバーと short_name メンバー、description メンバーの主なテキストの方向を指定します。lang メンバーと一緒に、右から左に記述する言語の正しい表示をサポートします。

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

次の値のいずれかをとります：

• ltr（左から右）
• rtl（右から左）
• auto（テキストの方向についてベストな推察するためにユニコードの双方向アルゴリズムを使用するよう、ブラウザに示唆する）

display

Web アプリケーションで、開発者が好む表示モードを定義します。

"display": "standalone"

有効な値は次のものです：

icons

さまざまなコンテキストでのアプリケーションアイコンとして機能する、画像オブジェクトの配列を指定します。たとえば、それらは、他のアプリケーションのリストの中で Web アプリケーションを表現するためや、OS のタスクスイッチャーやシステム設定に Web アプリケーションを統合するために使用できます。

"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"
  }
]

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

lang

name メンバーと short_name メンバー内の値のための主要な言語を指定します。 この値は 1 つの言語タグを含む文字列です。

"lang": "en-US"

name

たとえば、他のアプリケーションの一覧の中やアイコンのラベルとして、ユーザに表示されるように意図した、アプリケーションのための人が読める名前を提供します。

"name": "Google I/O 2015" 

orientation

すべての Web アプリケーションのトップレベル browsing contexts のための既定のオリエンテーションを指定します。

​​"orientation": "portrait-primary"

オリエンテーションは次の値のいずれかです：

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

prefer_related_applications

ユーザーエージェントに指定した関連のアプリケーション（下記参照）が利用可能であり、Web アプリケーションで推奨されいることを示す bool 値を指定します。これは、関連するネイティブアプリが Web アプリケーションが実行できない何らかの機能を本当に提供するときにだけ使用すべきです。

"prefer_related_applications": false

related_applications

基底のプラットフォームでインストール可能またはアクセス可能なネイティブアプリケーションを示す "アプリケーションオブジェクト" の配列を指定します。 — たとえば、Google Play ストアから取得できるネイティブアンドロイドアプリケーションです。そのようなアプリケーションは、似たような機能または同じ機能を提供する Web アプリケーション の代替えを意図しています — Web アプリのネイティブ版のようなものです。

"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"
  }]

アプリケーションオブジェクトは次の値を含んでいるかもしれません。

scope

この Web アプリケーションのアプリケーションコンテキストのナビゲーションスコープを定義します。基本的にこれは、マニフェストが適用されている間、Web ページを閲覧できるものを制限します。ユーザーがアプリケーションをスコープ外にナビゲートした場合、通常の Web ページに戻ります。

"scope": "/myapp/"

short_name

アプリケーションのために短い人が読める名前を提供します。Web アプリケーションのフルネームを表示する十分なスペースがないところでの使用を意図しています。

"short_name": "I/O 2015"

start_url

ユーザーがデバイスからアプリケーションを起動した場合にロードする URL を指定します。

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

theme_color

アプリケーションの既定のテーマカラーを指定します。 これは時々、OS によってアプリケーションの表示方法に影響を与えます（たとえば、アンドロイドのタスクスイッチャーでは、アプリケーションはテーマカラーで囲まれます）。

"theme_color": "aliceblue"

スプラッシュスクリーン

Chrome 47 以降では、ホームスクリーンから起動した Web アプリケーションのために、スプラッシュスクリーンを表示します。このスプラッシュスクリーンは、Web アプリマニフェストのプロパティを使用して自動生成されます： name と background_color、 icons 配列内の 128dpi に最も近いアイコン。

MIME タイプ

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

仕様

ブラウザ実装状況

[1] lang と scope をサポートしていません。