これも Service Worker Hackathon で聞いてきたネタ。
Android Chrome 42 から、Web サイトにて、
アプリのインストールや「ホーム画面に追加」のためのバナーを自動表示できる
ようになっているらしい。
なお、Service Worker を使う = SSL サイトであることが必須となるので、SSL 化してない場合は、あきらめる。
参考記事で紹介されているようなカスタムオフラインページを実現する サンプルでも良いし、Service Worker さえあれば良いので、空でもOK。
これを /sw.js で取得できるように配備。(取得時のパスが scope になるので、注意。)
Service Worker の Register 処理を書くService Worker をインストールするページで以下が実行されるようにする。
window.addEventListener('load', function() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js');
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>
<link rel="manifest" href="manifest.json">
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