PWAアイコン: アプリをインストール可能にする

インストールプロンプトはアイコンに左右される

インストール可能にする

1. 1

   必須の2つのPNGを書き出す

   192x192のicon-192.pngと512x512のicon-512.pngを作成します。この2つがインストールプロンプトのチェック対象です。

2. 2

   maskableバージョンを追加する

   マークをセーフゾーン内に中央配置し、周囲にパディングを付けた512x512を書き出し、purpose: maskableとして指定します。これでAndroidが円、squircle、角丸の四角に切り抜けます。

3. 3

   すべてmanifestに記載する

   各アイコンをmanifestのicons配列にsrc、sizes、type、purposeとともに入れます。正確な形は下のコードを参照してください。

4. 4

   manifestとapple-touch-iconをリンクする

   headに<link rel="manifest" href="/manifest.json">と、別途<link rel="apple-touch-icon">を追加します。iOSはmanifestではなく後者を読みます。

5. 5

   プロンプトを検証する

   サイトをChromeで開き、インストールのコントロールが表示されるか確認し、ブラウザの開発者ツールのapplicationパネルでmanifestにエラーがないことを確かめます。

manifestのicons配列

{
  "name": "Your App",
  "short_name": "App",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#1a1a1a",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icon-maskable-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

maskableが別になっている理由

よくある質問

Keep reading