Add poster (big picture / hero image)

[johnmellor]

Android, Windows and Chrome OS all support showing a poster image on a notification.

• Android calls this bigPicture:
  https://developer.android.com/reference/android/app/Notification.BigPictureStyle.html
  https://developer.android.com/design/patterns/notifications.html#ExpandedLayouts
• Windows calls this HeroImage:
  https://blogs.msdn.microsoft.com/tiles_and_toasts/2016/05/23/notificationsextensions-updated-for-anniversary-update-of-windows-10/#toasthero
• Chrome Apps/Extensions calls this imageUrl:
  https://developer.chrome.com/extensions/notifications#property-NotificationOptions-imageUrl
  https://developer.chrome.com/apps/richNotifications

Let's add this feature to Web Notifications:

partial dictionary NotificationOptions {
  USVString poster;
}

As usual, they will be displayed on a best-effort basis. For example, both Android and Windows only display the poster image when the notification is expanded (on Android, the most recent notification is usually expanded, depending on priority; in the Windows 10 Action Center, the most recent notification shown by each app is expanded [source]). Other platforms won't show them at all.

Ideally it would be possible to feature-detect platform support by checking if Notification.prototype contains poster, but that's a subject for another issue. I will note that on Android at least, BigPictureStyle is mutually exclusive with InboxStyle for displaying a list of items (#21), so if we later add lists to Web Notifications we may need some way to indicate that they are mutually exclusive and/or allow web developers to indicate which property is more important, but we can cross that bridge later.

[annevk]

I like the term "image" better. "poster" is used in the platform to mean the poster frame in videos (<video poster>).

[beverloo]

Since we call icons icon (and might go plural once we settle on some sort of IconSet), that works for me.

I think that the feature detection comment is implied, but clarifying what we'd like user agents to do here would be good. I've opened issue #80.

If we're not able to combine certain kinds of presentations, for instance image style (this issue) and an itemized list style, maybe we should consider having a type property? Do non-Android platforms have the capability to create rich compositions?

[annevk]

Is this shown instead of text, or is that a possibility? Do we need to provide for replacement text?

[johnmellor]

Is this shown instead of text, or is that a possibility?

I've been testing this on a variety of platforms. It never gets shown instead of text*, however on Android at least the body text of the notification is limited to a single line (ellipsized) when using BigPictureStyle, whereas usually the body text is able to wrap (if you use a BigTextStyle).

Do we need to provide for replacement text?

It seems Windows does support alt text here; Android and Chrome OS do not however. Perhaps for now the spec should just say authors should not rely on the image (even for sighted users, the image is often hidden unless a notification is expanded), and make sure that information is conveyed in another way?

*: (Android N unexpectedly stopped showing the contentText of a notification when it is expanded, but it's possible to work around that by also setting the BigPictureStyle's summaryText to the same string).

[annevk]

I suppose we can add imageAlt later if developers start using these differently, though at that point it might be too late for some deployed systems… But yeah, we should have some language around this and expected presentation.

[johnmellor]

I've updated PR #82 to clarify the expected presentation (lines 99-120) of image (including more concrete definitions of icon and badge for comparison) and to emphasize that authors should not rely on these graphics, but ensure information is conveyed in another way (lines 126-131). Does it look better now?