Reactを学ぶ manifest.json

manifest.json とは

manifest.json は、ブラウザ拡張機能や PWA などのアプリの設定情報を記述するファイル。create-react-app は、将来的にアプリを PWA として公開したくなった場合に対応できるよう、public フォルダに manifest.json を作成する。

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

PWA (Progressive Web App) とは、Webアプリをアプリ化する技術や仕組み。普通の Web アプリと同じように URL からアクセスできるのに、インストールしてオフラインでも動いたり、ホーム画面に追加できたりする「アプリっぽさ」を持つのが特徴。

なぜ必要なのか

manifest.json は、Web アプリをネイティブアプリのように扱うために必要な情報をブラウザに伝える役割を持つ。これによって、アプリの名前やアイコン、起動方法などが定義され、PWAとしてインストール可能になり、アプリらしい振る舞いを実現できる。ファイルがなければ、Web アプリはただの Web ページとして扱われる。

必須プロパティ

manifest.json に含まれる 必須プロパティは「用途（PWAかブラウザ拡張か）」によって異なる。

PWA

name または short_name

Web アプリのフルネーム、または短縮名を指定する

icons

Web アプリを表すアイコンを定義する 1 つ以上の画像を指定する

start_url

Web アプリを起動した際に開くための URL を指定する

display

Web アプリの推奨表示モードを指定する

ブラウザ拡張

manifest_version

拡張機能で使用するマニフェストファイル形式のバージョンを指定する

name

拡張機能の名前を指定する

version

拡張機能のバージョン番号を指定する

マニフェストの確認方法

1. アプリ（PWAや拡張機能）が動いているページを Chrome で開く
2. 画面上で右クリックし、「検証」を選択して DevTools を開く
3. DevTools の右上のメニュー（「>>」アイコン）から「Application」タブを選択
4. 左側のメニューで「Manifest」をクリックすると、現在読み込まれている manifest.json の内容が表示される

参考