BLOG
manifest.jsonでWebサイトのホーム画面登録を促す
2016/3/2
Android Chrome 42から、Webサイトでアプリのインストールや「ホーム画面に追加」のためのバナー表示できるようになっています。
Webサイトのホーム画面登録を促す「Mobile Bookmark Bubble」ではメッセージでブラウザの機能を促す仕組みでしたが今回はバナーをクリックするホーム画面が追加されます。
仕組みとしてはService Workerを使っています。
Service WorkerはブラウザがWebページとは別にバックグラウンドで実行するスクリプトのことでWebページやユーザのアクション等を必要としない機能を実現しています。
Service Workerを使っているのでSSL化してないと実装できません。
導入方法
manifest.jsonを準備する。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
{ "lang": "ja", "name": "sample", "short_name": "sample", "icons": [{ "src": "/app-icon.png", "sizes": "144x144", "type": "image/png" }], "start_url": "https://sample.net/", "display": "standalone" } |
準備したmanifest.jsonをheadで読み込む。
|
1 2 3 4 |
<html> <head> <meta charset="UTF-8"> <link rel="manifest" href="manifest.json"> |
以上になります。
登録できるURLが指定できるのはいいですね。トップページ以外でも実装できそうです。
バナーが表示されるタイミングはChomeの仕様のようで現時点では2週間以内に2回目の訪問があったときのようです。
「SUUMO（スーモ）」のスマートフォンサイトでは実装されているようです。
http://www.recruit-sumai.co.jp/press/2015/10/service-workeradd-to-homescreenoffline-cache2.html
関係ないけどconsole.logで面白いことやってる。。。
対応しているものは少ないですがワンアクションでホーム画面登録ができるのはとてもありがたいです。
これからブラウザ実装に期待したいです。
参考URL
http://qiita.com/tmtysk/items/2c5da83feec45b4ee36f
http://qiita.com/horo/items/ff665e4a6613e7684f8f
https://w3c.github.io/manifest/（Web App Manifest仕様）