Create React App を使用してウェブアプリ マニフェストを追加する

ウェブアプリ マニフェストはデフォルトで Create React App に含まれており、誰でも自分のデバイスに React アプリをインストールできます。

フセイン ジルデ

Create React App（CRA）には、デフォルトでウェブアプリ マニフェストが含まれています。このファイルを変更すると、ユーザーのデバイスにインストールされたアプリの表示方法を変更できます。

メリット

ウェブアプリのマニフェスト ファイルには、インストールされたアプリをユーザーのパソコンまたはモバイル デバイスでの表示形式を変更する機能が用意されています。JSON ファイルのプロパティを変更することで、次のようなアプリケーションの詳細情報を変更できます。

• Name
• 説明
• アプリアイコン
• テーマカラー

変更可能なすべてのプロパティについては、MDN のドキュメントをご覧ください。

デフォルト マニフェストを変更する

CRA では、新しいアプリが作成されると、デフォルトのマニフェスト ファイル /public/manifest.json が自動的に含まれます。

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

これにより、誰でも自分のデバイスにアプリをインストールして、アプリのデフォルトの詳細情報を表示できるようになります。HTML ファイル public/index.html には、マニフェストを読み込むための <link> 要素も含まれています。

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

CRA でビルドされ、マニフェスト ファイルが変更されているアプリケーションの例を次に示します。

この例ですべてのプロパティが正しく機能しているかどうかを確認するには:

• サイトをプレビューするには、[アプリを表示] を押してから、全画面表示 を押します。
• Ctrl+Shift+J キー（Mac の場合は Command+Option+J キー）を押して DevTools を開きます。
• [Application] タブをクリックします。
• [アプリケーション] パネルで、[マニフェスト] タブをクリックします。

まとめ

1. デバイスへのインストールが不要なサイトを構築する場合は、マニフェストと、マニフェストを参照している HTML ファイル内の <link> 要素を削除します。
2. ユーザーが各自のデバイスにアプリをインストールできるようにするには、必要なプロパティを使用してマニフェスト ファイルを変更します（CRA を使用していない場合はマニフェスト ファイルを作成します）。すべての必須属性と省略可能な属性については、MDN ドキュメントをご覧ください。