devlog

フロントエンドエンジニアの技術ブログ

manifest.json とは何か？

manifest.json とは

PWA として Web アプリケーションをインストールした時に、アプリケーションの振る舞い(アプリケーションの名前や説明、モバイル端末のホーム画面に表示するアイコンや、アドレスバーの色、スプラッシュスクリーンなど)を定義する JSON ファイルの事。 JSON ファイルではあるが、// でコメント記述する事ができる。

manifest.json の構成

{
  "short_name": "TODO",
  "name": "My TODO App",
  "icons": [
    {
      "src": "/images/icons-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icons-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/todo/?source=pwa",
  "background_color": "#FFFFFF",
  "display": "standalone",
  "scope": "/todo/",
  "theme_color": "#FFFFFF"
}

この他に様々なキーで振る舞いを定義をする事ができる。
詳細は、manifest.json - Mozilla | MDN を参照。

manifest.json の読み込み

HTMLの <head> ~ </head> 内において <link> タグを用いて読み込む。

<link rel="manifest" href="/manifest.json">

@ 2019 devlog