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%)や審査がない。自分のタイミングでリリースできる。