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 でビルドされたアプリの例を次に示します。

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

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

DevTool の [Manifest] タブに、アプリ マニフェスト ファイルのプロパティが表示されます。

まとめ

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