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

これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

ウェブアプリマニフェストは、プログレッシブウェブアプリ (PWA) と呼ばれる一連のウェブ技術の一部であり、アプリストアを通さずに端末のホーム画面にインストールすることができるものです。単純なホームスクリーンリンクやブックマークを持つ通常のウェブアプリとは異なり、 PWA は事前にダウンロードしてオフラインでも動作するだけでなく、通常の Web API を使用することもできます。

ウェブアプリマニフェストは、ウェブアプリケーションについて、ウェブアプリをダウンロードしたり、ユーザーにネイティブアプリと同じように見せる (例えば、端末のホーム画面にインストールされ、ユーザーに素早いアクセスと豊かな操作性を提供するなどの) ために必要なの情報を JSON テキストファイルで提供します。 PWA のマニフェストには、その名前、作者、アイコン、バージョン、説明、および (他のものの中で特に) 必要なすべてのリソースのリストが含まれています。

メンバー

ウェブマニフェストは以下のキーを含むことができます。それぞれのリンクをクリックすると詳細情報を見ることができます。

マニフェストの例

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

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

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

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

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

スプラッシュ画面

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

仕様書

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

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
background_color
実験的
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android 完全対応 46
補足
完全対応 46
補足
補足 Does not support lang or scope.
Chrome Android 完全対応 46
補足
完全対応 46
補足
補足 Does not support lang or scope.
Firefox Android ? Opera Android 完全対応 ありSafari iOS ? Samsung Internet Android 完全対応 5.0
補足
完全対応 5.0
補足
補足 Does not support lang or scope.
categories
実験的
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
description
実験的
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
dir
実験的
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
display
実験的
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 47Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 あり
iarc_rating_id
実験的
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
icons
実験的
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 53
補足 無効
完全対応 53
補足 無効
補足 By default, used for as the source for "Add to home screen" (see bug 1234558).
無効 From version 53: this feature is behind the manifest.install.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 あり
lang
実験的
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
name
実験的
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 53
補足 無効
完全対応 53
補足 無効
補足 By default, used for as the source for "Add to home screen" (see bug 1234558).
無効 From version 53: this feature is behind the manifest.install.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 あり
orientation
実験的
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
prefer_related_applications
実験的
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
related_applications
実験的
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
scope
実験的
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
screenshots
実験的
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
serviceworker
実験的非推奨非標準
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
short_name
実験的
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 53
補足 無効
完全対応 53
補足 無効
補足 By default, used for as the source for "Add to home screen" (see bug 1234558).
無効 From version 53: this feature is behind the manifest.install.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 あり
start_url
実験的
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
theme_color
実験的
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 53
補足 無効
完全対応 53
補足 無効
補足 By default, used for as the source for "Add to home screen" (see bug 1234558).
無効 From version 53: this feature is behind the manifest.install.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。