対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
ウェブアプリ マニフェストは、ブラウザに対してリクエスト方法を プログレッシブ ウェブアプリ(PWA)は、ユーザーのデスクトップまたは 接続します一般的なマニフェスト ファイルには少なくとも次のものが含まれます。
- アプリの名前
- アプリで使用するアイコン
- アプリの起動時に開く必要がある URL
マニフェスト ファイルを作成する
マニフェスト ファイルには任意の名前を付けることができますが、通常は manifest.json
という名前です。
(ウェブサイトの最上位ディレクトリ)から配信されます。仕様
拡張子を .webmanifest
にすることを提案していますが、JSON を使用することをおすすめします。
マニフェストが読みやすくなっています。
一般的なマニフェストは次のようになります。
{
"short_name": "Weather",
"name": "Weather: Do I need an umbrella?",
"icons": [
{
"src": "/images/icons-vector.svg",
"type": "image/svg+xml",
"sizes": "512x512"
},
{
"src": "/images/icons-192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/images/icons-512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"id": "/?source=pwa",
"start_url": "/?source=pwa",
"background_color": "#3367D6",
"display": "standalone",
"scope": "/",
"theme_color": "#3367D6",
"shortcuts": [
{
"name": "How's the weather today?",
"short_name": "Today",
"description": "View weather information for today",
"url": "/today?source=pwa",
"icons": [{ "src": "/images/today.png", "sizes": "192x192" }]
},
{
"name": "How's the weather tomorrow?",
"short_name": "Tomorrow",
"description": "View weather information for tomorrow",
"url": "/tomorrow?source=pwa",
"icons": [{ "src": "/images/tomorrow.png", "sizes": "192x192" }]
}
],
"description": "Weather forecast information",
"screenshots": [
{
"src": "/images/screenshot1.png",
"type": "image/png",
"sizes": "540x720",
"form_factor": "narrow"
},
{
"src": "/images/screenshot2.jpg",
"type": "image/jpg",
"sizes": "720x540",
"form_factor": "wide"
}
]
}
マニフェストの主なプロパティ
short_name
、name
マニフェストには、short_name
または name
のうち少なくとも 1 つを指定する必要があります。条件
両方を指定した場合、name
はアプリのインストール時に使用され、short_name
は
ユーザーのホーム画面、ランチャー、その他スペースのある場所で使用する
制限されています。
icons
ユーザーが PWA をインストールする際に、ブラウザのアイコンのセットを定義できます。 ホーム画面、アプリ ランチャー、タスク スイッチャー、スプラッシュ画面、 できます。
icons
プロパティは、画像オブジェクトの配列です。各オブジェクトは
画像の src
、sizes
プロパティ、type
が含まれています。用途
マスク可能なアイコン(アダプティブとも呼ばれます)
アイコンを表示するには、icon
プロパティに "purpose": "any maskable"
を追加します。
Chromium では、192x192 ピクセル以上のアイコンと 512x512 ピクセルのアイコン。この 2 つのアイコンサイズのみを指定すると、Chrome は は、デバイスに合わせてアイコンのサイズを自動的に調整します。通常のショッピングキャンペーンを 独自のアイコンを作成し、ピクセル パーフェクトに調整する、アイコンを段階的に提供する 使用できます。
id
id
プロパティを使用すると、使用する識別子を明示的に定義できます。
説明します。マニフェストに id
プロパティを追加すると、次の依存関係が削除されます。
start_url
またはマニフェストの場所を指定し、
使用できます。詳細については、次をご覧ください:
ウェブアプリ マニフェスト ID のプロパティを使用して PWA を一意に識別します。
start_url
start_url
は必須プロパティです。この URL によってブラウザに
アプリは起動時に起動する必要があり、
ホーム画面にアプリを追加したときに閲覧していたページ
start_url
は、プロダクトではなく、アプリ内にユーザーを直接誘導する必要があります
ランディングページに誘導できますユーザーが行動を起こした後すぐに何をしたいのか、
アプリを開いて
アプリに配置してください
background_color
スプラッシュ画面で background_color
プロパティが
アプリが初めてモバイルで起動されるとき。
display
アプリの起動時に表示されるブラウザ UI をカスタマイズできます。対象
たとえば、アドレスバーとブラウザのユーザー インターフェース要素を非表示にできます。ゲーム
全画面表示で起動することもできますdisplay
プロパティは、次のいずれかの値を取ります。
次の値を使用します。
プロパティ | 動作 |
---|---|
fullscreen |
ブラウザの UI なしでウェブアプリを開き、 表示されます。 |
standalone |
ウェブアプリを開くと、スタンドアロン アプリのようなデザインになります。アプリが実行される 独立したウィンドウで表示されます。また、標準設定が非表示になります。 UI 要素です。 <ph type="x-smartling-placeholder"> |
minimal-ui |
このモードは standalone に似ていますが、
最小限の UI 要素でナビゲーションを制御し、
[戻る]や [再読み込み]などのボタンがあります
<ph type="x-smartling-placeholder">
|
browser |
標準的なブラウザ環境。 |
display_override
ウェブアプリの表示方法を選択するには、マニフェストで display
モードを次のように設定します。
前述の説明をご覧ください。ブラウザがすべてのディスプレイをサポートする必要はない
必須です。
仕様で定義されているフォールバック チェーン
("fullscreen"
→ "standalone"
→ "minimal-ui"
→ "browser"
)。通知が
チェーン内の次の表示モードにフォールバックします。イン
まれに、これらのフォールバックによって問題が発生することがあります。たとえば、デベロッパーは
"browser"
ディスプレイに強制的に戻さずに "minimal-ui"
をリクエストする
"minimal-ui"
がサポートされていない場合、モードが自動的に有効になります。現在の動作では、
下位互換性のある方法で新しい表示モードを導入することは不可能です。
なぜなら、コールバック チェーンに場所がないからです。
display_override
プロパティを使用して、独自のフォールバック シーケンスを設定できます。
これはブラウザが display
プロパティの前とみなす値です。この値は
リストされた順序で考慮される一連の文字列、および
自動的に適用されます。いずれもサポートされていない場合、ブラウザは
display
フィールドを評価します。display
フィールドがない場合、ブラウザは
display_override
は無視されます。
display_override
の使用例を次に示します。詳細情報
"window-control-overlay"
はサポート範囲外です
表示されます。
{
"display_override": ["window-control-overlay", "minimal-ui"],
"display": "standalone",
}
このアプリを読み込むと、ブラウザは "window-control-overlay"
を使用しようとします。
見てみましょう。使用できない場合は "minimal-ui"
にフォールバックし、その後、
display
プロパティの "standalone"
。いずれも使用できない場合は
その後、ブラウザは標準のフォールバック チェーンに戻ります。
scope
アプリの scope
は、ブラウザが一部と見なす URL のセットです。
説明します。scope
は、すべてのエントリと exit を含む URL 構造を制御します
アプリを指定し、ブラウザはそれを使用してユーザーがアプリを離れたときに
クリックします。
scope
に関するその他の注意事項:
- マニフェストに
scope
を含めない場合、デフォルトのscope
は開始 URL ですが、ファイル名、クエリ、フラグメントは削除しています。 scope
属性には、相対パス(../
)またはそれより上位のパスを指定できます。 ナビゲーションの対象範囲を拡大できるパス(/
) 確認できますstart_url
はスコープ内にある必要があります。start_url
は、scope
属性で定義されたパスからの相対パスです。/
で始まるstart_url
は、常にオリジンのルートになります。
theme_color
theme_color
はツールバーの色を設定し、
タスク切り替えでのアプリのプレビュー。theme_color
は、
ドキュメント ヘッドで meta
のテーマカラーが指定されています。
メディアクエリ内の theme_color
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
theme_color
は、メディアクエリの media
属性を使用して調整できます。
meta
テーマのカラー要素。たとえば、ライトモードの色を 1 つ定義して、
ダークモード用の 2 つですただし、これらを
設定に使用できます。詳細については、次をご覧ください:
w3c/manifest#975 GitHub の問題をご覧ください。
<meta name="theme-color" media="(prefers-color-scheme: light)" content="white">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black">
shortcuts
shortcuts
プロパティは、アプリのショートカットの配列です。
アプリ内の主要なタスクへのクイック アクセスを提供します。各メンバー
少なくとも name
と url
を含む辞書です。
description
description
プロパティはアプリの用途を示します。
Chrome では、すべてのプラットフォームで説明の最大文字数は 300 文字です。 説明がそれより長い場合、ブラウザは 省略記号が表示されます。また、Android では、説明文に最大で 7 行のテキストが表示されます。
screenshots
screenshots
プロパティは、アプリを表す画像オブジェクトの配列です。
一般的な使用シナリオで役立ちます各オブジェクトに src
と sizes
を含める必要があります。
プロパティ、image の type
です。form_factor
プロパティは省略可能です。
ワイド画面に適したスクリーンショットの場合は、"wide"
に設定します。
幅の狭いスクリーンショットのみの場合は "narrow"
を使用します。
Chrome では、画像は次の条件を満たしている必要があります。
- 幅と高さは 320 ピクセル以上 3,840 ピクセル以下にする必要があります。
- 最大次元は最小長の 2.3 倍以下にする必要があります あります。
- 適切なフォーム ファクタに一致するすべてのスクリーンショットは、
アスペクト比。
- Chrome 109 以降、
form_factor
が"wide"
に設定されたスクリーンショットのみ 表示されます。
- Chrome 109 以降、
- Chrome 109 以降では、
form_factor
が"wide"
に設定されたスクリーンショット Android では無視されます。form_factor
がないスクリーンショットは引き続き表示されます 下位互換性が確保されます。
パソコンの Chrome では、次の要件を満たすスクリーンショットを 1 ~ 8 枚表示する 判断します残りは無視されます。
Android 版 Chrome では、次の要件を満たすスクリーンショットを 1 ~ 5 個表示する 判断します残りは無視されます。
<ph type="x-smartling-placeholder">ページにウェブアプリ マニフェストを追加する
マニフェストを作成したら、サイトのすべてのページに <link>
タグを追加します。
プログレッシブ ウェブアプリ次に例を示します。
<link rel="manifest" href="/manifest.json">
マニフェストをテストする
マニフェストが正しく設定されていることを確認するには、[Manifest] ペインを使用します。 Chrome DevTools の [Application] パネル
<ph type="x-smartling-placeholder">このペインでは、マニフェストの多くの情報が人が読める形式で表示されます。 また、すべての画像の読み込みが 確認します。
モバイルのスプラッシュ画面
アプリをモバイルで初めて起動する場合、ブラウザでの表示に少し時間がかかることがあります 最初のコンテンツでレンダリングを開始しますルールの アプリが機能していないとユーザーに思わせるような白い画面が表示される場合、 は、First Paint までスプラッシュ画面を表示します。
Chrome は name
からスプラッシュ画面を自動的に作成します。
マニフェストで指定した background_color
と icons
。スムーズな
スプラッシュ画面からアプリへの遷移時にbackground_color
読み込みページと同じ色にします
Chrome は、そのデバイスの解像度に最も近いアイコンを選択します。 スプラッシュ画面を作成しますほとんどの場合は 192px と 512px のアイコンで十分ですが、 より適切に表示されるように、追加のアイコンを指定できます。
関連情報
ウェブアプリ マニフェストに追加できるその他のプロパティについては、 MDN ウェブアプリ マニフェストのドキュメントをご覧ください。