manifest.json でWebアプリを「ホーム画面に追加」自動バナー表示に対応させる

  • 126
    Like
  • 2
    Comment
More than 1 year has passed since last update.

これも Service Worker Hackathon で聞いてきたネタ。
Android Chrome 42 から、Web サイトにて、 アプリのインストールや「ホーム画面に追加」のためのバナーを自動表示できる ようになっているらしい。

なお、Service Worker を使う = SSL サイトであることが必須となるので、SSL 化してない場合は、あきらめる。

前提

  • Working Draft の仕様を前提に書いているので、今後実装方法などは変わるかもしれない。
  • Android Chrome Beta (42.0.2311.68) で動作確認した。

Service Worker を用意する

参考記事で紹介されているようなカスタムオフラインページを実現する サンプルでも良いし、Service Worker さえあれば良いので、空でもOK。

これを /sw.js で取得できるように配備。(取得時のパスが scope になるので、注意。)

Service Worker の Register 処理を書く

Service Worker をインストールするページで以下が実行されるようにする。

register_sw.js
window.addEventListener('load', function() {
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js');
  }
});

manifest.json を用意する

start_url がホーム画面追加する際の URL となる。
short_name と 144x144 のアイコンは必須らしい。参考記事参照。
display は Web アプリを端末上で表示したときに、表示をどのように扱って欲しいかを指定するもので、 fullscreen, standalone, minimal-ui, browser から選択する。これも参考記事を参照。

manifest.json
{
  "lang": "ja",
  "name": "webapp name",
  "short_name": "webapp name",
  "icons": [{
        "src": "/app-icon.png",
        "sizes": "144x144",
        "type": "image/png"
      }],
  "start_url": "https://example.com/",
  "display": "standalone"
}

ちなみに、仕様には明記されていないが、 Google I/O 2015 のサイト で配信されている manifest.json には以下のような記述があった。関連する Android アプリがある場合は、このように書けるのかもしれない。

  "chrome_related_applications": [{
    "platform": "web"
  }, {
    "platform": "android",
    "location": "https://play.google.com/store/apps/details?id=com.google.samples.apps.iosched"
  }]

なお、Service Worker の Push Notification を使いたいときは、ここに GCM 関連のプロパティを書いたりする。

HTML 側に manifest.json を読み込む設定をする

link 要素を使う。

index.html
<!doctype>
<html>
<head>
<link rel="manifest" href="manifest.json">

公開してみた結果

  • 1回目のアクセスだと何も起こらない。(chrome://inspect/#devicesでService Workerが入っていることは確認できる。)
  • 端末の日付を1日進めてリロードしたところ、下からニュッとバナーが表示された! Kobito.4Gd1vX.png

参考