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 を開きます。
  • [アプリケーション] タブをクリックします。
  • [アプリケーション] パネルで、[マニフェスト] タブをクリックします。

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

まとめ

  1. サイトを作成するのにインストールの手間がかかる場合は、 HTML ファイルからマニフェストと <link> 要素を削除します。 示されます。
  2. ユーザーがデバイスにこのアプリケーションをインストールできるようにするには、 マニフェスト ファイル（CRA を使用しない場合は作成）を、 選択できます。「 MDN ドキュメント では、すべての必須属性と省略可能な属性について説明しています。