Add a new app badge How-to page to PWA docs

[captainbrosset]

Description

This PR is just one step within the larger PWA docs refresh project: mdn/mdn#280

This PR adds one new How-to page to the PWA docs about using app badges.

Motivation

In the PWA docs refresh project, we agreed to create a new How-to section that will contain 10 to 20 new pages about many of the features that PWAs can use. Displaying app badges is an important one. It's supported on desktop and mobile on a few major browsers, and can be a very effective way to re-engage users with an app. It's also a great web vs. native gap that's been filled and should be documented in our PWA docs.

Related issues and pull requests

• Parent project: [PROJECT] Revamp the Progressive Web Apps documentation mdn#280
• Related PRs: Add a new display mode How-to page to PWA docs #24709 and Add a new color customization How-to page to PWA docs #24925

CC @wbamberg @estelle

[github-actions]

Preview URLs

• /en-US/docs/Web/Progressive_web_apps/How_to/Display_badge_on_app_icon

External URLs (4)

URL: /en-US/docs/Web/Progressive_web_apps/How_to/Display_badge_on_app_icon
Title: Display a badge on the app icon

• https://learn.microsoft.com/microsoft-edge/progressive-web-apps-chromium/how-to/notifications-badges (1 time) (Note! This may be a new URL 👀)
• https://w3c.github.io/badging/ (1 time) (Note! This may be a new URL 👀)
• https://web.dev/patterns/advanced-apps/badges/ (1 time) (Note! This may be a new URL 👀)
• https://web.dev/push-notifications-server-codelab/ (1 time) (Note! This may be a new URL 👀)

(comment last updated: 2023-03-08 10:54:02)

[estelle]

Looks really good. I asked some questions as comments inline about "do we want to mention this or do that?" A few minor text suggestions too.

[estelle]

Should we create a BCD type table at the bottom or is there a BCD for desktop, browser, and PWA support? Either way, should we move the BCD-esque information to where BCD is normally found? I am sure we will hit this a lot as we write these pages, so thinking we should formalize.

[wbamberg]

There is BCD for setAppBadge() and clearAppBadge():

https://developer.mozilla.org/en-US/docs/Web/API/Navigator/setAppBadge#browser_compatibility
https://developer.mozilla.org/en-US/docs/Web/API/Navigator/clearAppBadge#browser_compatibility

This does include the support details that are described in this section of the new page.

I agree that we need a consistent way to represent support in these pages. In #24709 I already complained about using the browser-compat key, on the basis that this isn't a reference doc, but I wonder whether this isn't pointlessly pedantic. We could have a "Compatibility" or "Browser compatibility" H2, but instead of tables, have links to compat for any web platform features discussed, like:

• navigator.setAppBadge
• navigator.clearAppBadge

I think there might be some aspects of compat that are hard to capture in BCD, like which browsers support installation at all or which manifest members are mandatory for installation.

I'm going to ask for more opinions.

[captainbrosset]

I agree that we need a consistent way to go about this, so that all pages of the same type are the same.
Also, having to write prose for which browsers support a given How-to is going to be hard to maintain.

I had originally added BCD tables in another PR for a PWA How-to page, but Will and I discussed and decided to remove them.

I don't think having BCD tables, as they exist today, is the right option for How-to pages. Say I want to write a How-to about downloading movie files for offline viewing in a PWA. The page will reference multiple technologies such as Streams, IndexedDB, Service Workers, and others. Adding BCD tables for all of them would be messy. This will result in a big wall of, potentially unnecessary, information.

We'd almost want to have a tool, based on BCD, that you can configure to spit out a custom BCD table that only contains what you need for a given page.

[estelle]

Should we add a note about updating as the number of unread messages goes down, not just at zero? That's not really 'how to', more adding hints to good UI practices.

[estelle]

Looks good!