Copyright © 2025 World Wide Web Consortium. W3C® liability, trademark and permissive document license rules apply.
本规范定义了一个 API,允许已安装的 Web 应用 设置应用徽章,通常会显示在设备主屏幕或应用程序坞上的应用图标旁边。
本节描述了本文档在发布时的状态。当前 W3C 的出版物列表以及本技术报告的最新修订版可在 W3C 标准与草案索引中找到。
本文档仍在进行中。
本文档由 Web Applications 工作组 以工作草案的形式,根据 推荐规范流程发布。
以工作草案形式发布并不意味着 W3C 及其成员的认可。
本文档为草稿文件,随时可能被更新、替换或废止。除作为工作进展外,不应作为其他引用来源。
本文档由遵循 W3C 专利政策 的小组制作。 W3C 维护着 与本小组交付成果相关的专利公开列表 ,该页面也包含专利披露的说明。任何个人知晓含有 必要声明 的专利,须根据 《W3C 专利政策》第6节进行披露。
本文档受 2025年8月18日 W3C 流程文件管辖。
本节为非规范性内容。
徽章可能会导致部分用户产生通知疲劳。因此,作者应当仅在真正需要引起用户注意或行动的状态下使用徽章,避免将其用于营销或吸引参与等目的。
避免频繁变化的数值,以减少用户的干扰或认知负担。
为了支持无法感知徽章或已在系统层级禁用徽章的用户,建议作者在应用界面中通过可访问的模式呈现相同的状态(例如,清楚标记的应用内状态指示器)。
本节为非规范性内容。
async function updateMailBadge() {
// 检查 API 是否支持。
if (!navigator.setAppBadge) return;
const unreadCount = await getUnreadMailCount();
// 尝试设置应用徽章。
try {
await navigator.setAppBadge(unreadCount);
} catch (e) {
// 徽章不支持,或者用户阻止了应用设置徽章。
}
}
徽章可能会显示在操作系统中的应用图标上。如果在同一个应用内多次调用 API 来设置 或清除徽章,以最新调用为准,并且即使应用关闭后也可能继续显示。
async function showPlayerTurn(playerTurnId) {
if (playerTurnId === localPlayerId)
await navigator.setAppBadge();
else
await navigator.clearAppBadge();
}
在某些操作系统上,设置徽章可能需要用户授权。在这种情况下,开发者需要先查询
"通知"权限状态,然后再设置徽章。如果未获得授权,开发者需要通过
Notification
.requestPermission
()
进行权限申请。
async function checkPermission() {
permission = await navigator.permissions.query({
name: "notifications",
});
const button = document.getElementById("permission-button");
if (permission.state === "prompt") {
// 提示用户授权。
button.hidden = false;
button.addEventListener("click", async () => {
await Notification.requestPermission();
checkPermission();
}, { once: true });
return;
}
button.hidden = true;
}
徽章旨在作为一种机制,供已安装的 Web 应用程序通知用户有某些可能需要他们注意的新活动,或作为指示少量信息(例如未读计数)的一种方式。
一个徽章可以具有以下值之一:
0
的数值。
已安装的 Web 应用程序具有一个关联的徽章,其被初始化为 "nothing"。
当应用程序的徽章被设置时,用户代理或操作系统应该将应用程序的徽章与用户操作系统中应用程序的主要图标表示一起显示(例如,作为设备主屏幕上应用程序图标顶部的一个小覆盖层)。
用户代理可以要求用户明确许可才能设置徽章。当用户代理需要此类许可时,它应该将许可授予与“notifications”许可绑定。
当徽章被设置为"flag"时,用户代理或操作系统应该显示一个带有非特定符号的指示器(例如,一个彩色的圆圈)。
要将平台对象context的应用徽章设置为可选的unsigned long long
contents值:
Window
对象,则:
Document
。
InvalidStateError
"
DOMException
。
SecurityError
" DOMException
。
granted
",
在global上队列一个全局任务,任务源为用户交互任务源,
以rejectpromise,错误为NotAllowedError
并终止此算法。
undefined
。
该 API 设计为只写。站点无法读取之前设置的徽章值,以确保应用徽章不能被用作存储或指纹识别机制。
用户代理或操作系统可以根据自身决定清除徽章 ,并遵循任何系统惯例(例如系统重置时)。
用户代理 可以(MAY) 对徽章设置 或清除进行速率限制,以防止产生干扰性动画并减少资源使用。然而,用户代理 通常应当(SHOULD)将速率限制留给操作系统,因为操作系统能更好地根据系统负载、用户偏好和无障碍需求来决定合适的限流策略。
本节为非规范性内容。
如果浏览器负责徽章的展示,则应可以定义一些可访问性指南。
除标记为非规范性的章节外,本规范中的所有编写指南、图示、示例和注释均为非规范性内容。规范其他部分均为规范性内容。
本文档中的关键字可以、必须、应当和不应 按照 BCP 14 [RFC2119] [RFC8174] 的描述进行解释,仅在以此处所示的大写形式出现时适用。
Referenced in:
Referenced in:
Referenced in: