We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Web App Manifest は、JSON形式のファイルでアプリケーションの(名前や著者、アイコン、説明のような)情報を提供します。主な目的はデバイスのホーム画面に、簡易的なアクセス手段とリッチな体験を提供するWebアプリケーションをインストールすることです。

Web App Manifestは、プログレッシブ Web アプリと呼ばれる一連の技術の一部です。プログレッシブ Web アプリはアプリストアを通さずにホーム画面にインストールすることができ、オフラインで利用できたりPush通知を受け取ることが出来るWebアプリケーションのことです。

Web App Manifestを利用するには、HTMLのheadタグに以下のlinkタグを入力してください。

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

マニフェスト例

{
  "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": "web"
  }, {
    "platform": "play",
    "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
  }]
}

メンバー

background_color

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

"background_color": "red"

ノートbackground_color メンバーは、アプリケーションがロードされている間のユーザーエクスペリエンスの向上にのみ役立ち、Web アプリケーションのスタイルシートが利用可能になると、ユーザーエージェントはこれを背景色として利用することはありません。

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(テキストの方向についてベストな推察するためにユニコードの双方向アルゴリズムを使用するよう、ブラウザに示唆する)

ノート: 値が省略された場合の既定値は、auto です。

display

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

"display": "standalone"

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

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

ノートディスプレイモード メディア機能を使用して、アプリのディスプレイモードに基づいて選択的に CSS を適用できます。これは、URL からサイトを起動するときとデスクトップアイコンから起動するときのユーザーエクスペリエンスに一貫性を持たせるために使用できます。

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

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

メンバー 説明
sizes スペースで区切られた画像の大きさを含む文字列。
src 画像ファイルへのパス。
type 画像のメディアタイプについてのヒント。このメンバーの目的は、ユーザーエージェントがサポートしていないメディアタイプの画像を素早く無視できるようにすることです。

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

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

"prefer_related_applications": false

ノート: 省略した場合、既定値は false です。

基礎となるプラットフォームでインストール可能またはアクセス可能なネイティブアプリケーションを示す "アプリケーションオブジェクト" の配列を指定します。 — たとえば、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"
  }]

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

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

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 アプリマニフェストのプロパティを使用して自動生成されます: namebackground_coloricons 配列内の 128dpi に最も近いアイコン。

MIME タイプ

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

仕様

仕様 状態 コメント
Web App Manifest 草案 初期定義。

ブラウザ実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 未サポート ? ? ? ?
background_colortheme_color 未サポート ? ? ? ?
density の削除 未サポート        
機能 Android Android Webview Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile Chrome for Android
基本サポート 未サポート 39.0 ? ? ? 32.0 ? 39.0
background_colortheme_color 未サポート 46.0 [1] ? ? ? ? ? 46.0 [1]
density の削除 未サポート 52.0           52.0

[1] langscope をサポートしていません。

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

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