以外としょうもない理由で表示されないんですよね〜
最近PWAが徐々に浸透してきましたね。
PWAは概念的な言葉なので、いざ具体的にPWAに対応しようとすると、「PWAってそもそも何だ？」となります。
ネットで調べると、ブラウザでサイトを表示した時に「ホーム画面に追加」ダイアログが表示されるようにする事もPWAの一つである事が解ります。
しかし、いざ対応してみたけど、何故か「ホーム画面に追加ダイアログ」が一向に表示されません。
今回はその原因を少しだけまとめてみようと思います。
- manifest.jsonがhtmlソース内に定義されていない
- ServiceWorkerが登録されていない
- サイトがTLSに対応していない
- サイト訪問回数が2回ではない
- サイトの訪問間隔が5分以上ではない
- manifest.json内のアイコン画像が404である
- おまけ
- 雑感
manifest.jsonがhtmlソース内に定義されていない
そもそも「ホーム画面に追加」を表示するエントリーポイントは、htmlにmanifest.jsonの定義が存在する事です。
<link rel="manifest" href="/manifest.json">
もしこの定義が無いページがあれば、全ページに入るように修正しましょう。
ServiceWorkerが登録されていない
よくsw.js等を見かけると思いますが、あれです。
ServiceWorkerについては、以下の公式リファレンスを参考にして下さい。
手動でServiceWorkerを登録する他に、workbox-swを利用したり、Angularフレームワークを利用しているならangular-service-workerを使う、等によって自動生成する手法もあります。
サイトがTLSに対応していない
HTTPS 経由で配信されている（Service Worker を使用するための要件）。
https://developers.google.com/web/fundamentals/app-install-banners/?hl=ja
もし自サイトがhttpsでアクセスできないなら、そもそもServiceWorkerが動かないので、ホーム画面に追加機能は利用できません。
サイト訪問回数が2回ではない
PWAの現行の仕様では、「サイトへの訪問回数が2回以上」なのです。
もし1回目の訪問の場合、残念ながらダイアログは表示されません。
これは恐らく「2回訪問するという事はこのサイトに興味を持っているのでダイアログを表示する。初回訪問者の場合は、にいきなりダイアログを表示してもただの押し売りのような形になって二度と訪問して貰えなくなる可能性があるので表示しない」というような事を考慮しての仕様なのだと思われます。
サイトの訪問間隔が5分以上ではない
PWAの現行の仕様では、「サイトへの訪問回数が2回以上、更にそれは5分以上の間隔を空けないといけない」なのです。
2 回以上のアクセスがあり、そのアクセスに 5 分以上の間隔がある。
https://developers.google.com/web/fundamentals/app-install-banners/?hl=ja
これも推測ですが、「初回訪問者が画面表示後に誤ってリロードする可能性があり、それは興味を持っての事なのか、事故なのか判別できない。5分後の再訪であれば、興味を持っているユーザと判断しても大丈夫だろう」という感じなのだと思われます。
・・・5分間隔と公式リファレンスに記載されていますが、私が試したところ、5分間隔でなくてもホーム画面に追加は表示されました。今は5分ではないのかもしれませんね。
manifest.json内のアイコン画像が404である
これは私が実際に嵌った事なのですが、manifest.jsonのアイコン画像の定義は、以下のようにしますよね。
"icons": [ { "src": "/assets/images/logo/icon_64x64.png", "type": "image/png", "sizes": "64x64" }, { "src": "/assets/images/logo/icon_128x128.png", "type": "image/png", "sizes": "128x128" }, { "src": "/assets/images/logo/icon_144x144.png", "type": "image/png", "sizes": "144x144" }, { "src": "/assets/images/logo/icon_256x256.png", "type": "image/png", "sizes": "256x256" }, { "src": "/assets/images/logo/icon_512x512.png", "type": "image/png", "sizes": "512x512" } ]
これ自体はいいのですが、もしこの画像に404のものが含まれていたらどうでしょう？
答えは「ホーム画面に追加は表示されない」です。
この404が厄介なのは、Google ChromeのDevToolsのConsoleタブ・Networkタブ・ApplicationタブのServiceWorkerメニューには404が表示されない点にあります。
この404を確認するには以下の3つの方法があります。
ブラウザやcurlコマンド等でアイコン画像のURLを表示してみる
単純に以下のURLをブラウザで確認します。
https://www.string-utility.com/assets/images/logo/icon_144x144.png
しかしこれだと複数のアイコン画像の確認に手間がかかってしまいます。
DevToolsのApplicationタブにある、Manifestメニューでmanifest.json情報を確認する
Manifestメニューはmanifest.json内の全情報を一覧できるので、こちらの確認方法を事をおすすめします。
もし404のアイコン画像があると、以下のように表示されます。
404になってしまっているアイコン画像が確認できたので、これを修正しましょう。
これらに対応して、ブラウザで自サイトを表示すると、以下のように「ホーム画面に追加」が表示されるようになります！
おまけ
manifest.jsonのshort_nameが12文字を超えたらどうなるか？
manifest.jsonのshort_name属性ですが、公式リファレンスには以下のような警告？が書かれています。
ユーザーがホーム画面にウェブアプリを追加すると、アプリ アイコンの下に short_name プロパティがラベルとして表示されます。 short_name が 12 文字を超えると、ホーム画面上で途中までしか表示されません。
https://developers.google.com/web/tools/lighthouse/audits/manifest-short_name-is-not-truncated?hl=ja
12文字を超えてしまうと、Google ChromeのLightHouseでProgressive Web Appsをテストして見ると、以下のようにエラー表示されます。
ではこの状態で「ホーム画面に追加」は機能するでしょうか？
答えは「正常にホーム画面に追加は機能する」です。（もしかしたら機種によって異なる可能性があります）
私の管理サイトのshort_nameに「StringUtility」という13文字を指定してLightHouseに怒られ、公式リファレンスで言うところの監査に不合格な筈ですが、いざ試したらホーム画面に追加はちゃんと動きますし、13文字表示できているようです。
機種やOSやフォントサイズによって恐らく表示領域が異なる場合があるので、short_nameの12文字制限は大目に見てくれているのかもしれませんね。
雑感
アイコン画像が404だったのは、実は数ヶ月気づきませんでした・・・「なーんかホーム画面に追加が表示されないな〜？angular-service-workerが悪いのかな〜？調べるの面倒臭いな〜」という感じで放置していたのですが、解決できて良かったです。
そもそもmanifest.jsonなんて一回書いたらそうそう編集しないので、確認する機会ってほとんど無いのですよね。
せめてDevToolsのConsoleかNetworkで404が確認できたら楽なのですけどね。
