ウェブサイトをいい感じにスマホにインストールさせる

ウェブサイトをスマホにブックマークして、ホーム画面に表示することは今までも可能でしたが、最近はブックマークではなく インストール に似た感覚の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

ブラウザ対応状況

スクリーンショット_2018-03-17_15.25.21
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">

アプリのインストールはなかなかハードルが高いので、こういったウェブとアプリの境界線をなくす機能を積極的に取り入れていきたいと思っています。

以上です。

何かありましたらコメントをどうぞ

comments powered by Disqus

人気の記事

950 Points チリ出身のギタリストが弾くドラゴンボールZがむちゃくちゃかっこいい…
774 Points Wordpress + Heroku + PostgreSQL + Amazon S3 = ¥0 / 無料でサイト運営
700 Points Rubyのチートシート 変数 / クラス / モジュール
524 Points Rubyのチートシート / アクティブサポート
451 Points 紙のデザイナーがウェブ開発できるようになるまでに必要なこと
435 Points Rails / Google Analyticsのデータを使って分析や管理画面のためのグラフをつくる
323 Points RailsとHerokuでノーティフィケーションをプッシュする / PusherとTurbolinksの兼ね合い
222 Points Rails / RSpec テスト書いたことない メンドクサイ(n´Д`)という時のチートシート
193 Points Rails / Ajaxを使って画面遷移しない一時保存機能をつける
193 Points Protractorでスクレイピングしてみた