● learn-tech

Web App Manifest

アプリ名・アイコン・テーマ色・起動 URL・ディスプレイモード等を JSON で定義。 ブラウザがこれを見て「アプリとして」振る舞わせる。

HTML から参照

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

ファイル名は manifest.webmanifest も可（拡張子 .json でも動く）。 サーバが application/manifest+json を返すのが正式。

主要なフィールド

フィールド意味
name正式名称（インストール時に表示）
short_name短縮名（ホーム画面アイコン下）
description説明
start_url起動 URL（既定 /）
scopeSW のスコープ範囲
display表示モード
display_overridedisplay の優先度配列
orientation画面の向き
background_colorスプラッシュ色
theme_colorステータスバー色
iconsアイコン配列
screenshotsストア風プレビュー
shortcuts長押しメニューの項目
categoriesカテゴリ
lang言語
idアプリ ID（永続）

display モード

display_override で柔軟に

{
  "display": "standalone",
  "display_override": ["window-controls-overlay", "standalone", "minimal-ui"]
}

対応している環境は配列の先頭から、対応していなければフォールバック。

アイコン

{
  "icons": [
    { "src": "/icons/icon-72.png", "sizes": "72x72", "type": "image/png" },
    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" },
    {
      "src": "/icons/maskable-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "/icons/maskable-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

必須サイズ

purpose

maskable アイコンは maskable.app でデザインを確認できる。

theme_color と background_color

HTML 側にも: 

<meta name="theme-color" content="#0b0d12" />
<meta name="theme-color" content="#0b0d12" media="(prefers-color-scheme: dark)" />
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" />

shortcuts（長押しメニュー）

Android ではアイコン長押しでショートカットメニューが出る。 

{
  "shortcuts": [
    {
      "name": "新規投稿",
      "short_name": "投稿",
      "description": "新しい投稿を作成",
      "url": "/posts/new",
      "icons": [{ "src": "/icons/new.png", "sizes": "96x96" }]
    },
    {
      "name": "通知",
      "url": "/notifications"
    }
  ]
}

screenshots

インストール時のリッチプレビュー（Android Chrome）に表示。 

{
  "screenshots": [
    {
      "src": "/screenshots/home.png",
      "sizes": "1080x1920",
      "type": "image/png",
      "form_factor": "narrow",
      "label": "ホーム画面"
    },
    {
      "src": "/screenshots/desktop.png",
      "sizes": "1920x1080",
      "type": "image/png",
      "form_factor": "wide"
    }
  ]
}

scope と start_url

{
  "start_url": "/?source=pwa",     // クエリで PWA からの起動を識別
  "scope": "/"
}

id（重要）

PWA の永続的な識別子。start_url を変えても同じアプリと認識させたい時に必須。 

{
  "id": "/?source=pwa",          // start_url と独立
  "start_url": "/"
}

related_applications

ネイティブアプリも持っている時、ストアへの誘導にも使える。 

{
  "prefer_related_applications": false,
  "related_applications": [
    { "platform": "play", "url": "https://play.google.com/...", "id": "com.example.app" },
    { "platform": "itunes", "url": "https://apps.apple.com/..." }
  ]
}

Share Target API

他アプリの「共有」シートに自分の PWA を出せる。 

{
  "share_target": {
    "action": "/share",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "title": "title",
      "text": "text",
      "url": "url",
      "files": [
        { "name": "image", "accept": ["image/*"] }
      ]
    }
  }
}

file_handlers（ファイルを開く）

{
  "file_handlers": [
    {
      "action": "/open",
      "accept": { "image/png": [".png"] }
    }
  ]
}

protocol_handlers（カスタム URL スキーム）

{
  "protocol_handlers": [
    { "protocol": "web+myapp", "url": "/handle?u=%s" }
  ]
}

iOS 用の追加メタタグ

iOS Safari は manifest を一部しか参照しない。古い meta タグも併用するのが定石: 

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="My PWA" />
<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png" />
<link rel="apple-touch-startup-image" href="/splash.png" />

動作確認

最低限のチェックリスト

✓ name, short_name, start_url, display
✓ icons に 192×192 と 512×512
✓ theme_color, background_color
✓ maskable アイコンも用意
✓ HTML 側にも theme-color meta
✓ HTTPS で配信