[w3c/manifest] Rename `purpose: badge` to `purpose: maskable` and expand on it (#830)

I'd like to experiment with letting PWAs specify the icon that appears in the "Site controls" notification (the silent notification where you can copy the URL). Since Android expects a grayscale icon for notifications, I'd like to have a purpose defined for this case.

![Site controls notifications in Chrome and Firefox](https://user-images.githubusercontent.com/1782266/70212654-90768200-16ec-11ea-83dc-2f1c62845fc3.png)

We currently have the `"badge"` purpose. In the spec its defined as:
> A user agent can present this icon where space constraints and/or color requirements differ from those of the application icon. 

I don't feel like this is clear enough for browsers or developers, and no browser currently supports this purpose type. 

---

There's been some discussion on this in multiple issues that I'll try to summarize here.

- The badge type was first proposed in #480, and named after the `badge` field in the [Notifications API](https://developer.mozilla.org/en-US/docs/Web/API/Notification/badge).
- When Shortcuts were added in #768, we had some discussion about how different platforms have different shortcut styles and @mgiuca proposed a `"monochrome"` purpose.
- #795 was spun off to discuss this more, specifically for Shortcuts. 
- I've outlined some potential future uses of a `"monochrome"` purpose in #808, but I just want to focus on Site controls for now.

---

I'd like to propose that we specify monochrome icons as images where all the r,g,b color information is removed and only the alpha is kept. Browsers can then apply whatever color is needed by the OS, or let the OS handle the tinting. This has the added benefit of letting developers potentially reuse their transparent PWA icons by specifying `purpose: "monochrome any"` if the silhouette is distinct. 

If no monochrome icon is available, the browser may choose to create a fallback. For Safari's pinned tabs, [icons are converted automatically](https://github.com/w3c/manifest/issues/480). In this example, Facebook has not specified any special icon.

![Safari pinned tabs](https://cloud.githubusercontent.com/assets/870154/17957611/83622cce-6ad6-11e6-9246-304fbfda588b.png)

In the case of Site controls, it also makes sense for the browser to show a default icon like its logo or the PWA logo, as Chrome and Firefox currently do.

To best handle different use cases, the browser may also add padding to the icon depending on where it is used. In the notification, no padding is needed. If the icon is used in a shortcut on Android, the browser may add padding so that it lines up with platform conventions. 

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/manifest/issues/830