ウェブアプリ マニフェストを追加する

François Beaufort
François Beaufort
GitHub
Pete LePage
Thomas Steiner
Alexey Rodionov
Alexey Rodionov
X GitHub LinkedIn

対応ブラウザ

  • Chrome: 39。 <ph type="x-smartling-placeholder">
  • Edge: 79。 <ph type="x-smartling-placeholder">
  • Firefox: サポートされていません。 <ph type="x-smartling-placeholder">
  • Safari: 17。 <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">
</ph> スタンドアロン ディスプレイの PWA ウィンドウの例。
スタンドアロン UI。
minimal-ui このモードは standalone に似ていますが、 最小限の UI 要素でナビゲーションを制御し、 [戻る]や [再読み込み]などのボタンがあります <ph type="x-smartling-placeholder">
</ph> 最小 UI ディスプレイの PWA ウィンドウの例。
最小限の UI。
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 のテーマカラーが指定されています。

<ph type="x-smartling-placeholder">
</ph> カスタムの theme_color が指定された PWA ウィンドウの例。 <ph type="x-smartling-placeholder">
</ph> カスタム theme_color を含む PWA ウィンドウの例。

メディアクエリ内の theme_color

対応ブラウザ

  • Chrome: 93。 <ph type="x-smartling-placeholder">
  • Edge: 93。 <ph type="x-smartling-placeholder">
  • Firefox: 106。 <ph type="x-smartling-placeholder">
  • Safari: 15。 <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 以降では、form_factor が "wide" に設定されたスクリーンショット Android では無視されます。form_factor がないスクリーンショットは引き続き表示されます 下位互換性が確保されます。

パソコンの Chrome では、次の要件を満たすスクリーンショットを 1 ～ 8 枚表示する 判断します残りは無視されます。

Android 版 Chrome では、次の要件を満たすスクリーンショットを 1 ～ 5 個表示する 判断します残りは無視されます。

<ph type="x-smartling-placeholder">
</ph> パソコンとモバイルでの豊富なインストール UI のスクリーンショット。 <ph type="x-smartling-placeholder">
</ph> パソコンとモバイルでのインストール UI が充実。

マニフェストを作成したら、サイトのすべてのページに <link> タグを追加します。 プログレッシブ ウェブアプリ次に例を示します。

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

マニフェストをテストする

マニフェストが正しく設定されていることを確認するには、[Manifest] ペインを使用します。 Chrome DevTools の [Application] パネル

<ph type="x-smartling-placeholder">
</ph> [マニフェスト] タブが選択された Chrome DevTools のアプリケーション パネル。 <ph type="x-smartling-placeholder">
</ph> DevTools でマニフェストをテストします。

このペインでは、マニフェストの多くの情報が人が読める形式で表示されます。 また、すべての画像の読み込みが 確認します。

モバイルのスプラッシュ画面

アプリをモバイルで初めて起動する場合、ブラウザでの表示に少し時間がかかることがあります 最初のコンテンツでレンダリングを開始しますルールの アプリが機能していないとユーザーに思わせるような白い画面が表示される場合、 は、First Paint までスプラッシュ画面を表示します。

Chrome は name からスプラッシュ画面を自動的に作成します。 マニフェストで指定した background_color と icons。スムーズな スプラッシュ画面からアプリへの遷移時にbackground_color 読み込みページと同じ色にします

Chrome は、そのデバイスの解像度に最も近いアイコンを選択します。 スプラッシュ画面を作成しますほとんどの場合は 192px と 512px のアイコンで十分ですが、 より適切に表示されるように、追加のアイコンを指定できます。

関連情報

ウェブアプリ マニフェストに追加できるその他のプロパティについては、 MDN ウェブアプリ マニフェストのドキュメントをご覧ください。