search
LoginSignup
161
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

Organization

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

これも 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

参考

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
161
Help us understand the problem. What are the problem?