Help us understand the problem. What is going on with this article?

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

More than 5 years have 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

参考

tmtysk
bldt
"Your growth, Improve the world" をビジョンに掲げ、自社事業やシステム開発サービスを提供しています
https://bldt.jp
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした