Adding the webapp's badge to the manifest

[beverloo]

I'd like to propose adding a badge property to the Manifest.

Authors would use this property to indicate a small icon that should be used to represent their webapp in space constrained locations, for example the status bar of a mobile device. Such badges are consistently displayed differently from regular icons, so using the smallest icons value (or a favicon for that matter) does not seem appropriate.

Today, both Chrome and Firefox show their respective logos in the status bar when showing a notification. This portrays no information to the user other regarding the source of the notification.

Web Notifications have a property called badge (spec) in which the developer can provide their own icon, but this is still significantly constrained by platform limitations (only ~13% of Android users have the necessary platform support).

In addition, there are various situations in which the browser shows notifications on behalf of the webapp.

Allowing authors to specify their webapp's badge in the manifest enables a more consistent experience for such browser-level notifications. Knowing which icon to badge notifications with at installation time makes it possible to work around these platform limitations, too.

Thoughts?

[benfredwells]

Some platforms (e.g. android) show a monochrome badge. Any ideas of how we'd allow sites to specify a monochrome badge and a color one?

[beverloo]

Different platforms take completely different approaches in displaying badges. You mention Android, it's not only monochrome, but it also limits display to non-transparent pixels. (Discarding partial transparency.) The actual colour may also display on, for example, theming.

Notifications has the following note that, incidentally, should be updated to mention badges as well.

Some platforms may modify an action icon resource to better match the platform’s visual style before displaying it to the user, for example by rounding the corners or painting it in a specific color. It is recommended to use an icon that handles such cases gracefully and does not lose important information through, e.g., loss of color or clipped corners.

[marcoscaceres]

We had related discussions to this previously on the WHATWG list.
https://www.mail-archive.com/whatwg%40lists.whatwg.org/msg38109.html

And:
https://www.mail-archive.com/www-archive@w3.org/msg05623.html

tl;dr: we need "badged-tasks API" for this (yes, with a less terrible name), where those tasks are reflected as badge numbers or similar. I'm traveling this week, so can only write a short reply. Would be great to discuss further.

[kenchris]

@marcoscaceres I don't think this is about showing a number badge, like unread emails.

@beverloo can you show some screenshots of where you intend this to be used? It is like an overlay right, like a gmail logo on top of a profile pic etc, right?

[beverloo]

Correct, this talks about badges as in status bar icons, following Notification API terminology.

I took two screenshots on Android, but it's effectively the same on all mobile platforms. Desktop platforms may choose to badge their toasts as well for additional attribution.

Badges in the status bar, and badges on the notifications.

Again, this issue is about being able to provide an icon that replaces the UA's icon in these scenarios with something appropriate for the webapp, in situations where the developer currently can't.

[raucao]

Seems to me like this is very similar to the monochrome SVG icon that e.g. desktop Safari uses for their (fairly) new Pinned Sites (in the tab bar). So would it perhaps be an option to solve it via additional attributes or attribute values for icons items?

[marcoscaceres]

Ah, apologies for misunderstanding.

On 29 Jul 2016, at 1:03 AM, Peter Beverloo notifications@github.com wrote:

Correct, this talks about badges as in status bar icons, following Notification API terminology.

I took two screenshots on Android, but it's effectively the same on all mobile platforms. Desktop platforms may choose to badge their toasts as well for additional attribution.

Badges in the status bar, and badges on the notifications.

Again, this issue is about being able to provide an icon that replaces the UA's icon in these scenarios with something appropriate for the webapp, in situations where the developer currently can't.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[kenchris]

So these are basically black/white (and inverted) images. Would be nice to specify these in a cross platform way.

[marcoscaceres]

So there is a need for these at least on Android. On iOS tho, the the app icons are used.

However, couldn't this just be added when the notification is created instead of having a generic icon? Or is there no option for that on Android (i.e., you have to specify the application's icon for notification up-front)?

[beverloo]

Browsers currently use their own icons on Android, but that's definitely not sufficient for branding. That's why the per-notification option was introduced. This is insufficient in two cases:

1. Notifications shown on behalf of the website, but not through the Notification API. (E.g. update notifications, media notifications, Chrome's forced push notification.)
2. Android users using Android L or earlier, where the necessary APIs to do this on a per-notification basis are not available.

@skddc It might be, but my concern is that it may be confusing when this happens since it'll be displayed in a different context, much smaller and often with a mask applied.

@kenchris We shied away from this in the Notification API because you'd end up defining operating system behaviour that's out of our control. It has a note indicating that certain resources can be modified by the OS to match platform consistency.

[marcoscaceres]

@beverloo, mabye we want is to enhance image objects with a "purpose" or "role" (though
"role" usually refers to ARIA role) and "platform" member... so:

{
   "icons": [ {
       "src": "icon/android/badge.png",
       "purpose": "badge",
       "platform": "android"
   }, {
       "src": "icon/app.png"
   }]
}

[raucao]

Wouldn't the platform member be rather prone to misuse? That is, some parties/platforms would likely use other platforms' icons then, because developers can't specify (or even know) all existing and future platforms (esp. the smaller ones). Furthermore, platforms might change what style they use with new major versions.

I think this should be defined more as style or maybe purpose. A small monochrome icon like this could be used on many platforms and in many places.

Maybe it also helps to look at how Apple currently solves this for their use case (even supporting an icon color): https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/pinnedTabs/pinnedTabs.html

[marcoscaceres]

Related: #361 (comment)

[marcoscaceres]

Wouldn't the platform member be rather prone to misuse?

Maybe all we need is the "purpose" then.

[marcoscaceres]

Just noting that Safari's pin tabs will simply convert a site's fav icon to monochrome for pinned tabs (when rel="mask-icon" is not used):

In the above, the "Y" is using rel="mask-icon" and fb is not.

[marcoscaceres]

Fixed comment above.

[marcoscaceres]

Sent proposal:
https://rawgit.com/w3c/manifest/purpose/index.html#purpose-member

(WIP)