怎么利用HTML的Badging API在PWA图标上显示未读消息数量角标-html教程-PHP中文网

badging api 是浏览器提供的 javascript 接口，非 html 标签，仅用于已安装的 pwa 在系统级图标（如任务栏、dock）设置 1–99 数字徽章，需 https、用户手势触发且不支持 safari；调用失败常见于未安装 pwa、非 localhost 非 https 或脱离用户交互上下文。

怎么利用html的badging api在pwa图标上显示未读消息数量角标

Badging API 不是 HTML 标签，而是浏览器暴露的 JS 接口

很多人搜“HTML Badging API”，误以为有 <badge></badge> 标签或类似 DOM 元素——实际没有。Badging API 是一个 JavaScript API，只作用于已安装的 PWA（渐进式 Web 应用），用于在桌面端任务栏图标、开始菜单磁贴、Dock 图标等**系统级位置**设置数字或状态徽章。它不操作页面内任何 DOM 元素，和 u-badge 或 span.badge 完全无关。

能否调用成功，取决于三件事：PWA 已正确注册并被用户安装、当前浏览器支持该 API、页面运行在安全上下文（https:// 或 localhost）。

Chrome 89+、Edge 91+、Firefox 117+（仅限 Windows/Linux）、Safari 尚未支持（截至 2026 年 5 月）
必须在 service worker 激活后、且用户已点击“添加到桌面”完成安装，才能生效
调用需在用户手势（如点击按钮）后立即执行，不能在页面加载时静默调用，否则会被浏览器拒绝

`navigator.setAppBadge()` 和 `navigator.clearAppBadge()` 怎么用

核心就两个方法：navigator.setAppBadge(12) 显示数字 12；navigator.clearAppBadge() 清除角标（显示为无徽章状态）。

注意参数限制非常严格：

数字只能是 1–99 的整数，传 0、100、"12"（字符串）、null 都会失败，控制台报 TypeError: Invalid badge value
传入非数字（比如 "99+"）不会自动截断或格式化，直接抛错
清除操作不等于设为 0 —— 必须显式调用 clearAppBadge()，否则角标会一直保留
调用后无返回值，也不触发回调；失败时仅在 console 报错，需用 try/catch 捕获

简单示例：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

document.getElementById('mark-unread').addEventListener('click', async () => {
  try {
    await navigator.setAppBadge(7);
  } catch (err) {
    console.warn('Badging API not supported or failed:', err.message);
  }
});

document.getElementById('clear-badge').addEventListener('click', async () => {
  try {
    await navigator.clearAppBadge();
  } catch (err) {
    console.warn(err.message);
  }
});

为什么调用了没反应？常见失效场景

最常遇到的不是代码写错，而是环境或时机不对：

开发时用 http://localhost:8080 可以，但 http://127.0.0.1:8080 或 http://mydev.local 不行——只有 localhost 被豁免 HTTPS 要求，其他域名必须走 https
PWA 没真正安装：仅靠 manifest.json + service worker 不够，用户必须手动点击“添加到桌面”或通过浏览器提示安装完成
在 Chrome 中打开 DevTools → Application → Manifest 页面，确认 “Installability” 显示 ✅ Installed，且 “Status” 是 “Active”
macOS 上部分版本 Chrome 会忽略角标（尤其使用 M系列芯片时），这是已知兼容性问题，非代码问题
调用发生在异步链深处（比如 Promise.then() 嵌套三层之后），脱离了用户手势上下文，浏览器拒绝执行