LoginSignup
7
7

More than 5 years have passed since last update.

実はウェブプッシュ通知に画像とかバッジ(ステータスバーのアイコン)付けられるよ

Last updated at Posted at 2017-02-14

言及している記事が全く見当たらないのですが、最近ウェブプッシュ通知を
表示するshowNotification()メソッドに色々オプションが追加されています。
その中でも特に有用と思われるのが、imageとbadgeオプションです。
ちなみにFirefox(ver.51)では使えません。

badge オプション(Chrome53から利用可能)

これはAndroidデバイスのステータスバーに表示するアイコンを指定するものです。
このオプションを付けない場合はChromeのアイコンが表示されます。
どのサービスのプッシュ通知かすぐに区別できるようになるので便利です。

このオプションにはPNG形式の画像のURLを指定します。
サイズは96x96が推奨です。

image オプション(Chrome56から利用可能)

画像のURLを指定することでプッシュ通知に画像を表示することができます。
スマホのネイティブアプリのプッシュ通知では以前からできましたが、ウェブプッシュ通知でもできるようになりました。
画像を投稿するようなサービスである場合、サムネイルなどを指定すると効果的かもしれません。

なお、こちらはPNG画像でなくてもかまいません。

スクリーンショット
http://imgur.com/a/sUd6e

参考

https://developer.mozilla.org/ja/docs/Web/API/ServiceWorkerRegistration/showNotification
https://blog.chromium.org/2016/12/chrome-56-beta-not-secure-warning-web.html

7
7
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
7