これも 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日進めてリロードしたところ、下からニュッとバナーが表示された！

参考

Manifest for a web application Living Document / W3C Working Draft 26 March 2015
Increasing engagement with Web App install banners
Push Notifications for the web

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

前提

Service Worker を用意する

Service Worker の Register 処理を書く

manifest.json を用意する

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

公開してみた結果

参考