无需登录 数据私有 本地保存

Badging API 徽章模拟器 - 设置App图标数字角标

10
0
0
0
5
实时预览
徽章设置
检测Badging API支持中...
实际API调用将影响浏览器/PWA图标
代码示例
// 设置数字徽章
if ('setAppBadge' in navigator) {
    await navigator.setAppBadge(5);
    console.log('徽章已设置为 5');
}
// 清除徽章
await navigator.clearAppBadge();
// 或使用 setAppBadge(0)
await navigator.setAppBadge(0);

// 设置仅红点(无数字)
await navigator.setAppBadge();
// Service Worker 中
self.addEventListener('push', async (event) => {
    const data = event.data?.json();
    const unreadCount = data?.unreadCount || 1;
    
    // 更新应用徽章
    if (self.navigator?.setAppBadge) {
        await self.navigator.setAppBadge(unreadCount);
    }
});
async function updateBadge(count) {
    if (!('setAppBadge' in navigator)) {
        console.warn('Badging API 不受支持');
        return false;
    }
    try {
        if (count <= 0) {
            await navigator.clearAppBadge();
        } else {
            await navigator.setAppBadge(count);
        }
        return true;
    } catch (err) {
        console.error('设置徽章失败:', err);
        return false;
    }
}
常见问题
Badging API 是一个现代化的Web API,允许Web应用在应用图标上显示数字徽章(角标)。它主要用于PWA(渐进式Web应用),在用户主屏幕、任务栏或应用启动器上显示未读消息数、待处理任务数等信息,提升用户参与度和通知可见性,而无需像推送通知那样打扰用户。
截至2024年,Badging API 主要在基于Chromium的浏览器中得到支持,包括Chrome 81+、Edge 81+、Opera 68+等。在macOS和Windows上,徽章显示在任务栏或Dock图标上;在Android上,徽章显示在主屏幕的PWA图标上。iOS Safari目前不支持Badging API。您可以通过检测 'setAppBadge' in navigator 来判断浏览器是否支持。
两者有本质区别:

Notification API:需要用户明确授权,会弹出可见的通知横幅,打断用户当前操作。适合重要、时效性强的消息。

Badging API无需用户授权,仅在应用图标上静默显示数字角标,不打断用户。适合表示未读数量、待处理状态等持续性信息。两者可以配合使用,例如收到新消息时既发送通知又更新徽章数字。
不需要。这是Badging API的一个重要优势。与Notification API不同,Badging API不需要用户授予任何权限,可以直接调用。徽章是静默更新的,不会打扰用户。不过,徽章的实际可见性取决于平台——在大多数平台上,只有安装了PWA后才能看到图标徽章。
根据规范,徽章数字应是一个小于2^53的正整数。不过在实际显示中,不同平台有不同的处理方式:
• 大多数平台对于过大的数字会显示为"99+"或类似的缩写
• 设置为0等同于清除徽章
• 不传参数(setAppBadge())会显示一个无数字的指示点
建议将徽章数字控制在合理范围内(如0-999),以确保良好的用户体验。
可以。Badging API在Service Worker中同样可用,通过self.navigator.setAppBadge()调用。这在处理后台推送通知时特别有用——您可以在收到推送时直接在Service Worker中更新徽章数字,而不需要等待主页面打开。需要注意检查self.navigator?.setAppBadge是否存在。
可能的原因包括:
未安装PWA:在大多数平台上,徽章只在PWA被安装到主屏幕/桌面后才可见
浏览器不支持:请检查是否在Chromium浏览器中(Chrome/Edge/Opera)
平台限制:iOS Safari不支持,部分Linux桌面环境可能不完全支持
权限问题:虽然Badging API无需授权,但某些企业策略可能限制其使用
建议先在支持的环境中安装PWA进行测试。
徽章的可见位置因平台而异:
Windows:任务栏上的PWA图标(需安装PWA)
macOS:Dock栏中的PWA图标
Android:主屏幕上的PWA快捷方式图标
ChromeOS:应用启动器中的图标
iOS:暂不支持
请注意,桌面浏览器标签页上通常不会显示徽章效果,必须安装为PWA。