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" />

マニフェスト ファイルが変更された CRA でビルドされたアプリの例を次に示します。

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

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

まとめ

1. デバイスにインストールする必要がないサイトを構築する場合は、マニフェストと、マニフェストを参照する HTML ファイル内の <link> 要素を削除します。
2. ユーザーにアプリをデバイスにインストールしてもらう場合は、マニフェスト ファイルを変更します（CRA を使用していない場合は作成します）。MDN のドキュメントでは、必須属性と省略可能な属性について説明しています。