iOS Safari中无参数调用navigator.setAppBadge()失效原因咨询

问题现象 #

根据Badging API规范，不带参数调用navigator.setAppBadge()应当显示无数字的图标徽章，但在iOS Safari中无法实现该效果：

• 传入数字参数（例如navigator.setAppBadge(23)）时，徽章能正常显示；iPhone 13 mini上，最高999,999的数字都能完整展示，不会被截断。
• 升级至iOS 17.0测试版后，该问题仍未修复。

场景背景 #

在使用Web Push API为Web App实现通知与徽章功能时，仅需告知用户轮到其进行游戏操作，无需显示具体数字，但目前iOS Safari下只能使用带数字的徽章替代。

调试相关补充 #

• 此前安装到主屏幕的Web App无法打开Web Inspector，Safari更新后已支持同时调试Service Worker和网页，但调试窗口偶尔会意外消失。

疑问 #

该不符合规范的行为是苹果的设计决策，还是属于Bug？若有人能在iOS Safari中实现无数字徽章，欢迎分享方案。

临时解决方案 #

以下代码通过平台判断，为iOS/iPadOS设备传入数字参数替代无数字徽章：

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

// 仅当轮到玩家操作时，在应用图标上显示徽章
if ('setAppBadge' in navigator) {
    try {
        if (player_is_up) { // 传入该函数的变量，标记是否轮到玩家操作
            // iOS/iPadOS的Safari不支持无数字徽章，因此传入数字替代
            is_iOS_or_iPadOS ? navigator.setAppBadge(999) : navigator.setAppBadge()
        }  
        else { navigator.clearAppBadge() }
    }
    catch(error) { console.log(`ERROR: ${error}`) }
}

内容的提问来源于stack exchange，提问作者monist