0

I'm working on deploying web push for notifications. Everything is working great, but I've come to understand that some browsers do not support Notification.image, or at least do not display said image. However, they all do seem to support Notification.icon, and Firefox actually uses Notification.icon to display an image in their rich push example.

I would ideally like to use Notification.image when supported, but fallback to Notification.icon when not. However, it's not so simple as just supplying an image for both, as then on browsers that do support displaying Notification.image, you'll get it twice.

I'm wondering if anyone knows of a way to detect support. Unfortunately, even browsers that don't support display still know that Notification.image is a thing that exists, so basic feature detection is out. I'd also like to avoid UA detection if at all possible, as keeping up with supported UAs would likely be a nightmare. Anyone know of anything I'm missing, or how have you handled this in your own experience?

Chris Pratt
  • 232,153
  • 36
  • 385
  • 444

1 Answers1

1

Okay. Well, now I feel stupid. Ah well, that's how we learn. Turns out, you can feature detect. I made an assumption that since Notification.image was in MDN, that Firefox at least would know about it, even though it is one of the browsers in particular that does not support displaying it. Then, I came across this actually very helpful site, and noticed that the buttons were greyed out if the particular section is not supported in your browser. The "Image" button was greyed out, so there must be a way to detect support, and after digging in the site's source, I face-palmed:

'image' in Notification.prototype

So, yes, it really is that simple. At least this might help someone else find the answer quicker.

Chris Pratt
  • 232,153
  • 36
  • 385
  • 444