【PWA】webプッシュ通知で送れる情報と通知の表示仕様のまとめ

webプッシュ通知で送ることのできる情報と、それが通知にどう表示されるのかを整理してみました。結構情報が多く、ブラウザによって対応している情報がバラバラなのがやや難点です。

Webプッシュ通知で送れる情報

厳密にはnotification生成時に使える情報ですが、以下のような情報を指定できます。

#情報説明
1title通知タイトル
2body通知本文
3iconアイコン画像のURL
4image本文内の画像のURL
5badgeバッジ画像のURL
6actionsアクションボタンの定義
7tag同一タグの場合、古い通知を新しい通知で上書き
8vibrate通知受信時のバイブ設定
Webプッシュ通知の情報

ブラウザによって対応していないものもありますが、最低限必要なのはタイトルと本文とアイコンになります。

イメージは対応していないブラウザもありますが、通知本文に画像を大きく表示できるので、記事のアイキャッチ画像など載せると良いかと思います。

バッジは通知バーや通知の左上に出る小さいアイコンです。指定しないとChromeならChromeマークになったりします。

アクションは通知下部にでるボタンです、押したときの動きなど設定できます。(あまり使わないかな)

タグは、同じタグ名を指定した通知は新しい通知が届いたら古い通知が消えます。

通知への表示イメージ

どの情報が通知のどこに使われるかは、下図のようなイメージになります。

タイトル、本文、イメージ画像、タグなどは通知毎に変える情報なのでFCMから送信するように設計すると良いでしょう。

アイコン画像やバッジ画像は企業を表す画像にすることが推奨されているので、リスナの処理の中でURLを固定で入れるのが良いかと思います。

カテゴリーPWA

コメントを残す

メールアドレスが公開されることはありません。