html制作Web App Badge徽章_html navigator setAppBadge徽章更新【实用】-html教程-PHP中文网

navigator.setappbadge 是 web app manifest 规范中用于在桌面端 pwa 图标右上角显示未读数等状态的 api，目前仅 chrome 89+、edge 91+ 等 chromium 浏览器支持，firefox 和 safari 不支持；需满足 https、pwa 已安装、manifest 中 display 为 "standalone" 或 "minimal-ui"、用户已授通知权限等前提条件。

html制作web app badge徽章_html navigator setappbadge徽章更新【实用】

setAppBadge 是什么，现在能用吗

navigator.setAppBadge 是浏览器提供的 Web App 主屏幕图标角标（Badge）更新接口，用于在 PWA 安装后，给桌面/主屏图标右上角显示数字或状态标记，比如未读消息数、待办数量。但它不是所有浏览器都支持：目前仅 Chromium 系列（Chrome 89+、Edge 110+、Opera 75+）原生支持；Firefox 和 Safari 完全不支持，且无明确实现计划。

如果你的 Web App 主要面向 Chrome/Edge 用户，且已配置为 PWA（含 manifest.json + service worker），那可以安全尝试；否则，这个 API 对多数用户无效，别把它当作跨平台通知方案。

调用 setAppBadge 前必须满足的 3 个条件

即使浏览器支持，navigator.setAppBadge 也会静默失败或抛错。常见原因是没过校验：

页面必须是 HTTPS（本地 localhost 除外）
用户必须已将网站以「添加到主屏幕」方式安装为 PWA（仅靠 manifest.json 不够，需触发安装流程并完成）
当前页面必须处于前台（即标签页激活状态），后台调用会被忽略（例如从 Service Worker 或 push 事件中直接调用无效）

验证是否已安装：可检查 navigator.getInstalledRelatedApps()（兼容性有限），更可靠的是监听 window.addEventListener('appinstalled', ...) 事件做标记。

怎么安全地设置和清除徽章

setAppBadge 接收一个 number 参数（非负整数），传 0 会清除角标；传 null 或 undefined 会抛 TypeError；传负数会被截断为 0。注意它不会自动节流，频繁调用（如每秒多次）可能被浏览器降频或丢弃。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

推荐写法：

if ('setAppBadge' in navigator) {
  try {
    await navigator.setAppBadge(3); // 设置为 3
  } catch (err) {
    // 常见错误：NotAllowedError（未安装）、InvalidStateError（后台）、TypeError（参数非法）
    console.warn('setAppBadge failed:', err.name);
  }
} else {
  console.log('setAppBadge not supported');
}

清除徽章统一用 navigator.setAppBadge(0)，不要用空字符串或 null —— 那会报错。