PWAで「ホーム画面に追加」が表示されない時に確認する事

以外としょうもない理由で表示されないんですよね〜

f:id:treeapps:20170310234605p:plain

最近PWAが徐々に浸透してきましたね。

PWAは概念的な言葉なので、いざ具体的にPWAに対応しようとすると、「PWAってそもそも何だ？」となります。

ネットで調べると、ブラウザでサイトを表示した時に「ホーム画面に追加」ダイアログが表示されるようにする事もPWAの一つである事が解ります。

しかし、いざ対応してみたけど、何故か「ホーム画面に追加ダイアログ」が一向に表示されません。

今回はその原因を少しだけまとめてみようと思います。

manifest.jsonがhtmlソース内に定義されていない
ServiceWorkerが登録されていない
サイトがTLSに対応していない
サイト訪問回数が2回ではない
サイトの訪問間隔が5分以上ではない
manifest.json内のアイコン画像が404である
- ブラウザやcurlコマンド等でアイコン画像のURLを表示してみる
- DevToolsのApplicationタブにある、Manifestメニューでmanifest.json情報を確認する
おまけ
- manifest.jsonのshort_nameが12文字を超えたらどうなるか？
雑感

manifest.jsonがhtmlソース内に定義されていない

そもそも「ホーム画面に追加」を表示するエントリーポイントは、htmlにmanifest.jsonの定義が存在する事です。

<link rel="manifest" href="/manifest.json">

もしこの定義が無いページがあれば、全ページに入るように修正しましょう。

ServiceWorkerが登録されていない

よくsw.js等を見かけると思いますが、あれです。

ServiceWorkerについては、以下の公式リファレンスを参考にして下さい。

developers.google.com

手動でServiceWorkerを登録する他に、workbox-swを利用したり、Angularフレームワークを利用しているならangular-service-workerを使う、等によって自動生成する手法もあります。

developers.google.com

https://angular.io/guide/service-worker-introangular.io

サイトが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のアイコン画像があると、以下のように表示されます。

f:id:treeapps:20180409121824p:plain

404になってしまっているアイコン画像が確認できたので、これを修正しましょう。

これらに対応して、ブラウザで自サイトを表示すると、以下のように「ホーム画面に追加」が表示されるようになります！

f:id:treeapps:20180409124611j:plain

おまけ

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をテストして見ると、以下のようにエラー表示されます。

f:id:treeapps:20180409125407p:plain