why doesn't navigator.setAppBadge() in Safari on iOS work without a number argument?

Question

According to the spec:

(https://www.w3.org/TR/badging/#example-showing-ready-status-on-the-app-icon)

navigator.setAppBadge() with no arg should alert the user with a badge containing no number, but it does not do so in Safari on iOS. You can try it yourself directly from the web inspector for the service worker (BTW, why can't I get a web inspector for the web app when it's installed on the home page?). EDIT: I can now get the developer tools to work with both the service worker and the web page; perhaps a Safari update? The windows will sometimes just disappear, however.

Why is this not to spec? Is this by Apple's design, or a bug?

If I put in a number:

navigator.setAppBadge(23)

...it works fine. (BTW, numbers up to 999,999 seem to display on my iPhone 13 mini without being clipped.) This is all in the context of trying to use the Web Push API to display notifications and badges for my web app, with the sole purpose of telling the user it's xer turn in the game. So I don't particularly want to put a number up, but it seems like I may end up having to use a badge with a '1' in it. Please let me know if anyone can get a badge with no number in Safari on iOS.

EDIT: I have now installed the iOS 17.0 beta to see if anything changed. It did not; one still cannot get a badge to display without a number. BTW, the beta is buggy; all of my outgoing SMS msgs now report as 'not sent' even though they are being sent immediately.

EDIT: going with something like this for now:

const platform = navigator?.userAgentData?.platform || navigator?.platform || 'unknown'
const is_iOS_or_iPadOS = /^iP/.test(platform) || 
    (platform == 'MacIntel' && navigator.maxTouchPoints > 0) 

// this puts a flag badge on app icon iff player is up
// just being extra careful here with the 'in navigator' check and the try-catch
if ('setAppBadge' in navigator) {

    try {
        if (player_is_up) { // var passed to this function

            // Safari on iOS/iPadOS won't show a badge without a number; so use a number...
            is_iOS_or_iPadOS ? navigator.setAppBadge(999) : navigator.setAppBadge()
        }  
        else { navigator.clearAppBadge() }
    }
    catch(error) { console.log(`ERROR: ${error}`) }
}

why doesn't navigator.setAppBadge() in Safari on iOS work without a number argument?

0 Answers0