Limited support 一部のブラウザのみ対応。使用時はサポート状況を確認すること。

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
46
79
46

manifest キーワードを link 要素の rel 属性に指定すると、ターゲットリソースがウェブアプリマニフェストであることを示します。

39
79
17
39
11.3

description はマニフェストのメンバーで、このウェブアプリケーションの主な特性や機能を説明するために使用します。 このテキストは、アプリストアでアプリを表示した際に、ユーザーがアプリの目的を理解する手助けとなります。

88
88
88

display はマニフェストのメンバーで、ウェブアプリケーションの推奨表示モードを指定するために使用します。表示モードは、オペレーティングシステムのコンテキスト内でアプリケーションが起動された際に、ブラウザーのUIがユーザーに表示される範囲を決定します。ブラウザーのインターフェイスをすべて表示するか、あるいは非表示にして、よりアプリケーションらしい体験を提供するかを選択できます。

39
79
17
39
11.3

icons はマニフェストのメンバーで、このウェブアプリケーションを表すアイコンを定義する 1 つ以上の画像を指定するために使用します。

39
79
17
39
15.4

id はマニフェストメンバーで、このウェブアプリケーションのための一意な識別子を指定するために使用します。

96
96
17
96
16.4

name はマニフェストのメンバーで、ウェブアプリケーションのフルネームを指定するために使用します。これは通常、アプリケーションの一覧に掲載されている場合や、アプリケーションのアイコンのラベルとして表示される場合など、ユーザーに表示されます。

39
79
17
39
11.3

orientation はマニフェストのメンバーで、ウェブアプリケーションの既定の方向を指定します。 アプリが起動時および使用中にどのように表示されるべきかを、端末の画面の向きに関連して定義します。特に、複数の方向に対応している端末で具体的な内容が定義されます。

39
79
39

scope はマニフェストメンバーで、ウェブアプリケーションのページとサブディレクトリーを格納する最上位の URL パスを指定するために使用します。 ユーザーがウェブアプリをインストールして使用すると、スコープ内のページがアプリのようなインターフェイスを提供します。 ユーザーがアプリの対象外のページに移動した場合でも、アプリのようなインターフェイスはそのままですが、ブラウザーではコンテキストの変化を示すために、 URL バーなどの UI の要素が表示されます。

53
79
17
53
11.3

serviceworker メンバーは、商業ウェブサイトで指定された決済方法の決済メカニズムを提供するウェブベースの決済アプリケーションを実行するために、ジャストインタイム (JIT) でインストールされ、登録されたサービスワーカーを指定します。詳細は、Payment Handler API を参照してください。

70
79
70
manifests.webapp.serviceworker.scope
実験的 非標準
70
79
70
manifests.webapp.serviceworker.src
実験的 非標準
70
79
70
manifests.webapp.serviceworker.use_cache
実験的 非標準
70
79
70

short_name はマニフェストメンバーで、ウェブアプリケーションの短縮名を指定するために使用します。これは、完全な name が利用できる空間に対して長すぎる場合に、使用されるかもしれません。

39
79
17
39
11.3

start_url はマニフェストメンバーで、ユーザーがウェブアプリケーションを起動した際に開くための URL を指定するために使用します。例えば、端末のホーム画面にあるアプリケーションのアイコンをタップしたり、アプリケーションの一覧に掲載されているアプリケーションを起動したりした際などです。

39
79
17
39
11.3

theme_color メンバーは、ウェブアプリケーションのユーザーインターフェイスの既定色を指定するために使用します。 この色は、ツールバー、アドレスバー、ステータスバーなど、さまざまなブラウザー UI 要素に適用されます。 タスクスイッチャーやホーム画面にアプリケーションが追加された場合など、特に目立つ場合があります。

46
79
17
46
15
1+対応 (バージョン) 未対応 注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
実装メモ
  • display`および/または `display_override` は、ウェブアプリをインストールするために必要である。
注釈 1件
実装メモ
  • display`および/または `display_override` は、ウェブアプリをインストールするために必要である。
注釈 1件
実装メモ
  • display`および/または `display_override` は、ウェブアプリをインストールするために必要である。
注釈 1件
実装メモ
  • icons`はウェブアプリをインストール可能にするために必要である。
注釈 1件
実装メモ
  • icons`はウェブアプリをインストール可能にするために必要である。
注釈 1件
実装メモ
  • apple-touch-icon` が存在せず、`"purpose" が "any"` に設定されているか、`"purpose"` が指定されていない場合にのみ使用される。
注釈 1件
実装メモ
  • icons`はウェブアプリをインストール可能にするために必要である。
注釈 1件
実装メモ
  • apple-touch-icon` が存在せず、`"purpose" が "any"` に設定されているか、`"purpose"` が指定されていない場合にのみ使用される。
注釈 1件
実装メモ
  • このプロパティは解析されるが、何の効果もない。
注釈 1件
実装メモ
  • name` または `short_name` は、ウェブアプリをインストールするために必要である。
注釈 1件
実装メモ
  • name` または `short_name` は、ウェブアプリをインストールするために必要である。
注釈 1件
実装メモ
  • name` または `short_name` は、ウェブアプリをインストールするために必要である。
注釈 1件
実装メモ
  • ウェブアプリをインストールするには、`short_name` または `name` が必要である。
注釈 1件
実装メモ
  • ウェブアプリをインストールするには、`short_name` または `name` が必要である。
注釈 1件
実装メモ
  • ウェブアプリをインストールするには、`short_name` または `name` が必要である。
注釈 1件
実装メモ
  • start_url`はウェブアプリをインストール可能にするために必要です。
注釈 1件
実装メモ
  • start_url`はウェブアプリをインストール可能にするために必要です。
注釈 1件
実装メモ
  • start_url`はウェブアプリをインストール可能にするために必要です。

基本構文

HTML
<link rel="manifest" href="/manifest.json">
<!-- manifest.json -->
<!-- { "name": "マイアプリ", "short_name": "アプリ",
     "start_url": "/", "display": "standalone",
     "theme_color": "#3498db" } -->

ライブデモ

Web app manifest fields

Compare the core fields that shape installable web app behavior.

プレビュー全画面表示

Installable app checklist

Describe how manifests pair with service workers and icons in app-like experiences.

プレビュー全画面表示

Manifest role

Explain that the manifest describes application metadata rather than replacing page content.

プレビュー全画面表示

実務での使いどころ

  • Web app manifest の活用

    manifest キーワードを <link> 要素の rel 属性に指定すると、ターゲットリソースがウェブアプリマニフェストであることを示します。

注意点

  • 一部のブラウザでのみ対応。使用前にブラウザサポートを確認すること。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。