api.Navigator.setAppBadge - Safari does not fully support spec as documented by MDN

[rejhgadellaa]

What type of issue is this?

Browser bug (a bug with a feature that may impact site compatibility)

What information was incorrect, unhelpful, or incomplete?

According to the setAppBadge page, Safari offers full support. However, it incorrectly handles no or 0 as an argument.

A number which will be used as the value of the badge. If contents is 0 then a badge not containing a count will be displayed.
https://developer.mozilla.org/en-US/docs/Web/API/Navigator/setAppBadge#parameters

Instead, Safari does not show a badge or removes it (if it was set with a number before).

What browsers does this problem apply to, if applicable?

Safari 16.4

What did you expect to see?

Calling setAppBadge() and setAppBadge(0) should show a badge without a number.

Did you test this? If so, how?

Run navigator.setAppBadge() and navigator.setAppBadge(0) via dev tools for any installed web app.

Can you link to any release notes, bugs, pull requests, or MDN pages related to this?

Intended behavior:

A number which will be used as the value of the badge. If contents is 0 then a badge not containing a count will be displayed.
https://developer.mozilla.org/en-US/docs/Web/API/Navigator/setAppBadge#parameters

WebKit bug:
https://bugs.webkit.org/show_bug.cgi?id=254884

Do you have anything more you want to share?

No response

MDN URL

No response

MDN metadata

No response

[Elchi3]

Maybe the MDN docs are wrong?

https://w3c.github.io/badging/#setting-the-application-badge says

[if] contents is 0
Set badge to "nothing".

https://w3c.github.io/badging/#dfn-nothing says

The special value "nothing":
Indicates that there is no badge currently set.

[rejhgadellaa]

Ah right, I guess MDN is wrong regarding the the special value "nothing" here and Safari handles that correctly.

BUT the special value "flag" is still incorrect in Safari:

contents was not passed:
Set badge to "flag".
https://w3c.github.io/badging/#setting-the-application-badge

The special value "flag":
Indicates that the badge is set, but contains no specific value.
https://w3c.github.io/badging/#dfn-flag

✅ "nothing": setAppBadge(0) removes the badge (Safari is correct here)

❌ "flag": setAppBadge() adds a badge but without a number (Safari treats this as "nothing")

[rejhgadellaa]

There's been some activity on the WebKit bug:
https://bugs.webkit.org/show_bug.cgi?id=254884

So WebKit actually seems to handle everything correctly, but Safari (the app shell around WebKit) and/or iOS are either wrong or unable to correctly handle setAppBadge() with the "flag" value (iOS may not support non-numbered badges).

[Elchi3]

MDN is wrong because of this PR a while ago mdn/content#22320. I opened a PR to revert it.

So, we probably also need to update Chromium browsers if they implement behavior not according to the spec.

[rejhgadellaa]

Thanks for looking into this!

Chromium behaves correctly, at least on Windows:

// Show badge with a number:
navigator.setAppBadge(1);

// Remove badge:
navigator.setAppBadge(0);

// Show badge without number 
// (see screenshot below)
navigator.setAppBadge();

[Elchi3]

Chromium behaves correctly, at least on Windows:

Okay, great!

Safari (the app shell around WebKit) and/or iOS are either wrong or unable to correctly handle setAppBadge() with the "flag" value (iOS may not support non-numbered badges).

Then this should be the only thing to note in compat data, right?

[rejhgadellaa]

Yep that sounds good!

[knutesears]

I have installed iOS 17.0 beta and can confirm that it is still not possible to set a badge without a number. This just seems wrong -- why would Apple disallow useful UI (something requires the user's attention, but a number might be misleading)? I just want to tell the user it's xer turn. Perhaps I'll display 999,999 instead, since it's more noticeable ; )