Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
158
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

@tmtysk

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

参考

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
158
Help us understand the problem. What are the problem?