Web app manifest
manifest キーワードを <link> 要素の rel 属性に指定すると、ターゲットリソースがウェブアプリマニフェストであることを示します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| 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 |
manifests.webapp.serviceworker 実験的 非標準 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 |
- display`および/または `display_override` は、ウェブアプリをインストールするために必要である。
- display`および/または `display_override` は、ウェブアプリをインストールするために必要である。
- display`および/または `display_override` は、ウェブアプリをインストールするために必要である。
- icons`はウェブアプリをインストール可能にするために必要である。
- icons`はウェブアプリをインストール可能にするために必要である。
- apple-touch-icon` が存在せず、`"purpose" が "any"` に設定されているか、`"purpose"` が指定されていない場合にのみ使用される。
- icons`はウェブアプリをインストール可能にするために必要である。
- apple-touch-icon` が存在せず、`"purpose" が "any"` に設定されているか、`"purpose"` が指定されていない場合にのみ使用される。
- このプロパティは解析されるが、何の効果もない。
- name` または `short_name` は、ウェブアプリをインストールするために必要である。
- name` または `short_name` は、ウェブアプリをインストールするために必要である。
- name` または `short_name` は、ウェブアプリをインストールするために必要である。
- ウェブアプリをインストールするには、`short_name` または `name` が必要である。
- ウェブアプリをインストールするには、`short_name` または `name` が必要である。
- ウェブアプリをインストールするには、`short_name` または `name` が必要である。
- start_url`はウェブアプリをインストール可能にするために必要です。
- start_url`はウェブアプリをインストール可能にするために必要です。
- start_url`はウェブアプリをインストール可能にするために必要です。
基本構文
<link rel="manifest" href="/manifest.json">
<!-- manifest.json -->
<!-- { "name": "マイアプリ", "short_name": "アプリ",
"start_url": "/", "display": "standalone",
"theme_color": "#3498db" } --> ライブデモ
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 属性に指定すると、ターゲットリソースがウェブアプリマニフェストであることを示します。
注意点
- 一部のブラウザでのみ対応。使用前にブラウザサポートを確認すること。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。