webプッシュ通知で送ることのできる情報と、それが通知にどう表示されるのかを整理してみました。結構情報が多く、ブラウザによって対応している情報がバラバラなのがやや難点です。
Webプッシュ通知で送れる情報
厳密にはnotification生成時に使える情報ですが、以下のような情報を指定できます。
| # | 情報 | 説明 |
|---|---|---|
| 1 | title | 通知タイトル |
| 2 | body | 通知本文 |
| 3 | icon | アイコン画像のURL |
| 4 | image | 本文内の画像のURL |
| 5 | badge | バッジ画像のURL |
| 6 | actions | アクションボタンの定義 |
| 7 | tag | 同一タグの場合、古い通知を新しい通知で上書き |
| 8 | vibrate | 通知受信時のバイブ設定 |
ブラウザによって対応していないものもありますが、最低限必要なのはタイトルと本文とアイコンになります。
イメージは対応していないブラウザもありますが、通知本文に画像を大きく表示できるので、記事のアイキャッチ画像など載せると良いかと思います。
バッジは通知バーや通知の左上に出る小さいアイコンです。指定しないとChromeならChromeマークになったりします。
アクションは通知下部にでるボタンです、押したときの動きなど設定できます。（あまり使わないかな）
タグは、同じタグ名を指定した通知は新しい通知が届いたら古い通知が消えます。
通知への表示イメージ
どの情報が通知のどこに使われるかは、下図のようなイメージになります。
タイトル、本文、イメージ画像、タグなどは通知毎に変える情報なのでFCMから送信するように設計すると良いでしょう。
アイコン画像やバッジ画像は企業を表す画像にすることが推奨されているので、リスナの処理の中でURLを固定で入れるのが良いかと思います。