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

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

Houssein Djirdeh

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

なぜこれが有用なのでしょうか。

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

• 名前
• 説明
• アプリのアイコン
• テーマカラー

変更可能なすべてのプロパティの詳細については、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" />

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

• `Ctrl+Shift+J`（Mac の場合は `Command+Option+J`）を押して、デベロッパー ツールを開きます。
• [アプリケーション] タブをクリックします。
• [アプリケーション] パネルで、[マニフェスト] タブをクリックします。

まとめ

1. デバイスにインストールする必要がないと思われるサイトを構築している場合は、マニフェストと、それを指す HTML ファイル内の <link> 要素を削除します。
2. ユーザーにデバイスにアプリをインストールしてもらいたい場合は、マニフェスト ファイルを変更（または CRA を使用していない場合は作成）して、任意のプロパティを追加します。MDN ドキュメントには、必須の属性と省略可能な属性がすべて記載されています。