ウェブサイトをいい感じにスマホにインストールさせる
ウェブサイトをスマホにブックマークして、ホーム画面に表示することは今までも可能でしたが、最近はブックマークではなく インストール に似た感覚のUXを提供することができるようになりました。
manifest.json を正しく書けば簡単に対応できるのでおすすめ。
html
1
<link rel="manifest" href="/manifest.json">
json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
{
"name": "My App Like Website",
"short_name": "My App",
"start_url": "/",
"scope": ".",
"display": "standalone",
"orientation": "portrait-primary",
"background_color": "#fff",
"theme_color": "#FFD244",
"description": "My website want to be an app.",
"dir": "ltr",
"lang": "ja-JP",
"icons": [
{
"src": "/src/images/icons/app-icon-48x48.png",
"type": "image/png",
"sizes": "48x48"
},
{
"src": "/src/images/icons/app-icon-96x96.png",
"type": "image/png",
"sizes": "96x96"
},
{
"src": "/src/images/icons/app-icon-144x144.png",
"type": "image/png",
"sizes": "144x144"
},
{
"src": "/src/images/icons/app-icon-192x192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/src/images/icons/app-icon-256x256.png",
"type": "image/png",
"sizes": "256x256"
},
{
"src": "/src/images/icons/app-icon-384x384.png",
"type": "image/png",
"sizes": "384x384"
},
{
"src": "/src/images/icons/app-icon-512x512.png",
"type": "image/png",
"sizes": "512x512"
}
]
}
display はいろいろモードがあるので、変更してテストしてみると面白いと思います。
orientation で向きを強制できるのも良いですね。
参考リンク
https://developers.google.com/web/fundamentals/web-app-manifest/
https://developer.mozilla.org/en-US/docs/Web/Manifest
ブラウザ対応状況
https://caniuse.com/#feat=web-app-manifest
Chromeがターゲットなら必ず対応すべき。
モバイルSafariは全然対応してくれてないんだけど、検討中とのこと。
インストールを促すこともできる
ウェブサイトを開いて、まだインストールされていなかったら、自動的にバナーを出すことができます。設定するだけでインストールできるようになるので、サイトのリテンションが改善しそうですね。
https://developers.google.com/web/fundamentals/app-install-banners/
HTMLタグで manifest.json を補完する
現状では対応してくれていないモバイルSafariやWindowsでアクセスしてきたユーザに対して、同じようなUXを提供するには、別途HTMLタグでいろいろと設定が必要です。
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!-- The Manifest -->
<link rel="manifest" href="/manifest.json">
<!-- モバイルSafariが manifest.json に対応するまで、下記で補完 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="PWAGram">
<link rel="apple-touch-icon" href="/src/images/icons/apple-icon-57x57.png" sizes="57x57">
<link rel="apple-touch-icon" href="/src/images/icons/apple-icon-60x60.png" sizes="60x60">
<link rel="apple-touch-icon" href="/src/images/icons/apple-icon-72x72.png" sizes="72x72">
<link rel="apple-touch-icon" href="/src/images/icons/apple-icon-76x76.png" sizes="76x76">
<link rel="apple-touch-icon" href="/src/images/icons/apple-icon-114x114.png" sizes="114x114">
<link rel="apple-touch-icon" href="/src/images/icons/apple-icon-120x120.png" sizes="120x120">
<link rel="apple-touch-icon" href="/src/images/icons/apple-icon-144x144.png" sizes="144x144">
<link rel="apple-touch-icon" href="/src/images/icons/apple-icon-152x152.png" sizes="152x152">
<link rel="apple-touch-icon" href="/src/images/icons/apple-icon-180x180.png" sizes="180x180">
<!-- Windows用の manifest.json 補完 -->
<meta name="msapplication-TileImage" content="/src/images/icons/app-icon-144x144.png">
<meta name="msapplication-TileColor" content="#fff">
<meta name="theme-color" content="#FFD244">
アプリのインストールはなかなかハードルが高いので、こういったウェブとアプリの境界線をなくす機能を積極的に取り入れていきたいと思っています。
以上です。