Installable Web (App Manifest)

3つの要件（HTTPS, Manifest, Service Worker）を満たすと、ブラウザのアドレスバーに「インストール」ボタンが出現する。

PWA
Progressive Web Apps。Webの技術で、ネイティブアプリのような体験（オフライン動作、インストール、Push通知）を提供する仕組み。

The Manifest File

manifest.json defines how your app looks on the home screen.

manifest.json
{
  "name": "My Great App",
  "short_name": "My App",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Why PWA?

  • Discoverability: SEOに強い（Google検索で見つかるアプリ）。
  • Linkability: URLだけでシェアできる。
  • Independence: Apple税(30%)や審査がない。自分のタイミングでリリースできる。