サイトのWebアプリ化を押し進めるためmanifest.jsonを設置。
MDNにも記事があるし、普段使いのFirefoxでもしっかり動くのだろうか。
上記はモバイルフレンドリーの目線でWebアプリ化に幅広く言及している記事。
この記事はさっと読めて、参考になる。
manifest.json
1{
2 "name": "Kinlan's Amazing Application ++",
3 "short_name": "Kinlan's Amaze App",
4 "icons": [{
5 "src": "launcher-icon-3x.png",
6 "sizes": "144x144",
7 "type": "image/png"
8 }],
9 "start_url": "index.html",
10 "display": "standalone"
11}
これが最低限必要な項目らしい。
index.html
1<link rel="manifest" href="/manifest.json">
あとはヘッドで読み込めばオケ。
これはService Workerを使用した「ホームへ追加」バナーの表示の記事。
1window.addEventListener('load', function() {
2 if ('serviceWorker' in navigator) {
3 navigator.serviceWorker.register('/sw.js');
4 }
5});
これもインストールバナーについて詳しく解説している記事。
Increasing engagement with Web App install banners — Google Web Updates
そしてそのサンプル。
samples/app-install-banner at gh-pages · GoogleChrome/samples
Choromeでは問題なく動作し、インストールバナーも表示された。
ただ一度インストールをしないを選択すると、次回再表示はなさそうなのであまり強力な効果は期待できないかも。
theme-colorの設定がmanifest.json内に記述できるようになったよう。
従来のmetaタグだとこう。
1<meta name="theme-color" content="#2196F3">
manifest.jsonだとこう。
"theme_color": "#2196F3"
しかしmanifest.jsonのみの記述だとホームへ追加しないと効力を発揮しないようなので、現時点では両方記述したほうがいいかもしれない。
FirefoxでもServiceWorkerをテストする。
about:configでdom.serviceWorkersを検索し、フラグをtrueへ変更する。
ServiceWorkerは問題なく作動したが、アプリ化の効果は現時点では無さそう。今後に期待したい。