Note that we settled on calling this a "badge".

Spec discussion: https://github.com/whatwg/notifications/issues/65

Spec PR: https://github.com/mvano/notifications/commit/d79fe317ccc00dc7e27dde88928dc33bcf38e5b4

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/2dc0200c983a414b1ec462b5fe6fee0076e67231

commit 2dc0200c983a414b1ec462b5fe6fee0076e67231
Author: mvanouwerkerk <mvanouwerkerk@chromium.org>
Date: Fri Mar 18 10:21:45 2016

Add badge to web notifications.

* This is guarded by the NotificationBadge runtime flag.
* On Android M+ the badge is displayed in the status bar,
  otherwise Chrome falls back to the default Chrome icon.
* On all Android versions the badge is displayed in the notification.
* Not quite correct on desktop yet (it conflicts with the settings button).
* Screenshots: https://imgur.com/a/wewTP
* Spec discussion: https://github.com/whatwg/notifications/issues/65
* Spec PR: https://github.com/mvano/notifications/commit/d79fe317ccc00dc7e27dde88928dc33bcf38e5b4
* Intent to implement and ship: https://goo.gl/4KwzyR

BUG= 591394 

Review URL: https://codereview.chromium.org/1750083004

Cr-Commit-Position: refs/heads/master@{#381927}

[modify] https://crrev.com/2dc0200c983a414b1ec462b5fe6fee0076e67231/chrome/android/java/res/layout/web_notification_small_icon.xml
[modify] https://crrev.com/2dc0200c983a414b1ec462b5fe6fee0076e67231/chrome/android/java/src/org/chromium/chrome/browser/notifications/CustomNotificationBuilder.java
[modify] https://crrev.com/2dc0200c983a414b1ec462b5fe6fee0076e67231/chrome/android/java/src/org/chromium/chrome/browser/notifications/NotificationBuilderBase.java
[modify] https://crrev.com/2dc0200c983a414b1ec462b5fe6fee0076e67231/chrome/android/java/src/org/chromium/chrome/browser/notifications/NotificationUIManager.java
[modify] https://crrev.com/2dc0200c983a414b1ec462b5fe6fee0076e67231/chrome/android/java/src/org/chromium/chrome/browser/notifications/StandardNotificationBuilder.java
[modify] https://crrev.com/2dc0200c983a414b1ec462b5fe6fee0076e67231/chrome/android/javatests/src/org/chromium/chrome/browser/notifications/CustomNotificationBuilderTest.java
[modify] https://crrev.com/2dc0200c983a414b1ec462b5fe6fee0076e67231/chrome/browser/notifications/notification_ui_manager_android.cc
[modify] https://crrev.com/2dc0200c983a414b1ec462b5fe6fee0076e67231/chrome/browser/notifications/platform_notification_service_browsertest.cc
[modify] https://crrev.com/2dc0200c983a414b1ec462b5fe6fee0076e67231/chrome/browser/notifications/platform_notification_service_impl.cc
[modify] https://crrev.com/2dc0200c983a414b1ec462b5fe6fee0076e67231/chrome/test/data/notifications/platform_notification_service.html
[modify] https://crrev.com/2dc0200c983a414b1ec462b5fe6fee0076e67231/content/browser/notifications/notification_database_data.proto
[modify] https://crrev.com/2dc0200c983a414b1ec462b5fe6fee0076e67231/content/browser/notifications/notification_database_data_conversions.cc
[modify] https://crrev.com/2dc0200c983a414b1ec462b5fe6fee0076e67231/content/browser/notifications/notification_database_data_unittest.cc
[modify] https://crrev.com/2dc0200c983a414b1ec462b5fe6fee0076e67231/content/browser/notifications/notification_message_filter.cc
[modify] https://crrev.com/2dc0200c983a414b1ec462b5fe6fee0076e67231/content/child/notifications/notification_data_conversions.cc
[modify] https://crrev.com/2dc0200c983a414b1ec462b5fe6fee0076e67231/content/child/notifications/notification_data_conversions_unittest.cc
[modify] https://crrev.com/2dc0200c983a414b1ec462b5fe6fee0076e67231/content/child/notifications/notification_manager.cc
[modify] https://crrev.com/2dc0200c983a414b1ec462b5fe6fee0076e67231/content/child/notifications/pending_notification.cc
[modify] https://crrev.com/2dc0200c983a414b1ec462b5fe6fee0076e67231/content/child/notifications/pending_notification.h
[modify] https://crrev.com/2dc0200c983a414b1ec462b5fe6fee0076e67231/content/child/notifications/pending_notifications_tracker_unittest.cc
[modify] https://crrev.com/2dc0200c983a414b1ec462b5fe6fee0076e67231/content/common/notification_constants.h
[modify] https://crrev.com/2dc0200c983a414b1ec462b5fe6fee0076e67231/content/common/platform_notification_messages.h
[modify] https://crrev.com/2dc0200c983a414b1ec462b5fe6fee0076e67231/content/public/common/notification_resources.h
[modify] https://crrev.com/2dc0200c983a414b1ec462b5fe6fee0076e67231/content/public/common/platform_notification_data.h
[add] https://crrev.com/2dc0200c983a414b1ec462b5fe6fee0076e67231/content/test/data/notifications/48x48.png
[modify] https://crrev.com/2dc0200c983a414b1ec462b5fe6fee0076e67231/third_party/WebKit/LayoutTests/http/tests/notifications/notification-properties.html
[modify] https://crrev.com/2dc0200c983a414b1ec462b5fe6fee0076e67231/third_party/WebKit/LayoutTests/http/tests/notifications/serviceworker-notification-properties.html
[modify] https://crrev.com/2dc0200c983a414b1ec462b5fe6fee0076e67231/third_party/WebKit/LayoutTests/http/tests/serviceworker/webexposed/global-interface-listing-service-worker-expected.txt
[modify] https://crrev.com/2dc0200c983a414b1ec462b5fe6fee0076e67231/third_party/WebKit/LayoutTests/webexposed/global-interface-listing-dedicated-worker-expected.txt
[modify] https://crrev.com/2dc0200c983a414b1ec462b5fe6fee0076e67231/third_party/WebKit/LayoutTests/webexposed/global-interface-listing-expected.txt
[modify] https://crrev.com/2dc0200c983a414b1ec462b5fe6fee0076e67231/third_party/WebKit/LayoutTests/webexposed/global-interface-listing-shared-worker-expected.txt
[modify] https://crrev.com/2dc0200c983a414b1ec462b5fe6fee0076e67231/third_party/WebKit/Source/modules/notifications/Notification.cpp
[modify] https://crrev.com/2dc0200c983a414b1ec462b5fe6fee0076e67231/third_party/WebKit/Source/modules/notifications/Notification.h
[modify] https://crrev.com/2dc0200c983a414b1ec462b5fe6fee0076e67231/third_party/WebKit/Source/modules/notifications/Notification.idl
[modify] https://crrev.com/2dc0200c983a414b1ec462b5fe6fee0076e67231/third_party/WebKit/Source/modules/notifications/NotificationData.cpp
[modify] https://crrev.com/2dc0200c983a414b1ec462b5fe6fee0076e67231/third_party/WebKit/Source/modules/notifications/NotificationDataTest.cpp
[modify] https://crrev.com/2dc0200c983a414b1ec462b5fe6fee0076e67231/third_party/WebKit/Source/modules/notifications/NotificationOptions.idl
[modify] https://crrev.com/2dc0200c983a414b1ec462b5fe6fee0076e67231/third_party/WebKit/Source/platform/RuntimeEnabledFeatures.in
[modify] https://crrev.com/2dc0200c983a414b1ec462b5fe6fee0076e67231/third_party/WebKit/public/platform/modules/notifications/WebNotificationData.h

The current plan is to not show the badge on Desktop, so it will only be used on Android.

Unlike on Android, on desktop there is no notification center or status bar to display the badge in to represent the notification, and that's really the main purpose of the badge.

Attribution to Chrome has been used in the past as an argument for using a badge inside a notification, but if it's a custom one that no longer makes sense. On desktop we still display the origin string to both indicate this is a web notification, and attribute which site it came from.

There is no good space left for another icon, web notification layouts are quite busy already. There's an x for closing, and a cog for settings, using the top right and bottom right corners. Then there's the large icon, the title, body, and origin. Optionally, there are up to two buttons with icons.

Overlaying the badge on top of the main icon has been explored, to save space. However, this may make things look worse rather than better. If done like on Android (Material convergence has been a goal) that means reducing the size of the main icon, applying a circular mask, partially overlaying that with a smaller circle, and placing the badge (possibly painted white) on top of that. This is all very specific and restrictive for a web API that is used on multiple platforms using a different look and feel. Not displaying it on desktop actually makes more sense in this case.

The specification already marks the badge as optional, so this conforms.

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/beb6b08839769066c793cfd63757dbb223c1a275

commit beb6b08839769066c793cfd63757dbb223c1a275
Author: mvanouwerkerk <mvanouwerkerk@chromium.org>
Date: Tue May 24 17:16:55 2016

Notification badges are only supported on Android.

BUG= 591394 

Review-Url: https://codereview.chromium.org/2006743002
Cr-Commit-Position: refs/heads/master@{#395622}

[modify] https://crrev.com/beb6b08839769066c793cfd63757dbb223c1a275/chrome/browser/notifications/platform_notification_service_impl.cc
[modify] https://crrev.com/beb6b08839769066c793cfd63757dbb223c1a275/chrome/browser/notifications/platform_notification_service_interactive_uitest.cc

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/5b01b7dba7c0c0267fd535a20e479ea7eb3ccc40

commit 5b01b7dba7c0c0267fd535a20e479ea7eb3ccc40
Author: mvanouwerkerk <mvanouwerkerk@chromium.org>
Date: Thu Jun 30 19:49:04 2016

Promote NotificationBadge to stable.

Intent to ship: http://bit.ly/295ZVHZ

BUG= 591394 

Review-Url: https://codereview.chromium.org/2108723003
Cr-Commit-Position: refs/heads/master@{#403258}

[modify] https://crrev.com/5b01b7dba7c0c0267fd535a20e479ea7eb3ccc40/third_party/WebKit/LayoutTests/virtual/stable/http/tests/serviceworker/webexposed/global-interface-listing-service-worker-expected.txt
[modify] https://crrev.com/5b01b7dba7c0c0267fd535a20e479ea7eb3ccc40/third_party/WebKit/LayoutTests/virtual/stable/webexposed/global-interface-listing-dedicated-worker-expected.txt
[modify] https://crrev.com/5b01b7dba7c0c0267fd535a20e479ea7eb3ccc40/third_party/WebKit/LayoutTests/virtual/stable/webexposed/global-interface-listing-expected.txt
[modify] https://crrev.com/5b01b7dba7c0c0267fd535a20e479ea7eb3ccc40/third_party/WebKit/LayoutTests/virtual/stable/webexposed/global-interface-listing-shared-worker-expected.txt
[modify] https://crrev.com/5b01b7dba7c0c0267fd535a20e479ea7eb3ccc40/third_party/WebKit/Source/platform/RuntimeEnabledFeatures.in

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/c4de35820b0e87cda101cfa08e448fca3245550c

commit c4de35820b0e87cda101cfa08e448fca3245550c
Author: ericwilligers <ericwilligers@chromium.org>
Date: Fri Sep 15 11:18:30 2017

Notifications: retire NotificationBadge flag

The small icon (badge) for web notifications
shipped in M53.

The runtime flag is no longer needed.

BUG= 591394 

Change-Id: I40294ace496a2a882923a43f6efa2c78eb5d93f3
Reviewed-on: https://chromium-review.googlesource.com/668268
Reviewed-by: Peter Beverloo <peter@chromium.org>
Reviewed-by: Jochen Eisinger <jochen@chromium.org>
Commit-Queue: Eric Willigers <ericwilligers@chromium.org>
Cr-Commit-Position: refs/heads/master@{#502224}
[modify] https://crrev.com/c4de35820b0e87cda101cfa08e448fca3245550c/third_party/WebKit/Source/modules/notifications/Notification.idl
[modify] https://crrev.com/c4de35820b0e87cda101cfa08e448fca3245550c/third_party/WebKit/Source/modules/notifications/NotificationOptions.idl
[modify] https://crrev.com/c4de35820b0e87cda101cfa08e448fca3245550c/third_party/WebKit/Source/platform/runtime_enabled_features.json5

Can this capability please be implemented on Chrome OS? It is very annoying to only have notification badges from Android apps and Chrome internals.

Deleted: Screenshot 2018-06-16 at 9.03.47 PM.png 101 KB

	Screenshot 2018-06-16 at 9.03.47 PM.png 101 KB View Download