html实现应用徽章计数_html Badging API应用图标徽章数字【攻略】

轻磊小哥_1774

轻磊小哥_1774

2026-05-15

251人浏览

原创

badging api 仅 chrome 89+ 和 edge 91+ 支持,firefox/safari 不支持;需用 'setappbadge' in navigator 检测可用性;仅在 pwa(含 service worker 且 manifest 中 display 为 standalone/minimal-ui)下生效;桌面端需主屏幕安装且系统开启任务栏徽章;参数必须为大于 0 的整数,设 0 无效,清空须用 clearappbadge();无自动同步,需业务侧主动管理;首次调用可能触发权限提示,拒绝后调用静默失败;徽章样式与位置由系统控制,不可自定义。

html实现应用徽章计数_html badging api应用图标徽章数字【攻略】

Badging API 不支持所有浏览器,先查兼容性再写代码

Chrome 89+ 和 Edge 91+ 才支持 navigator.setAppBadge() 和 navigator.clearAppBadge(),Firefox 和 Safari 完全不支持。调用前必须检查是否存在,否则会直接报 TypeError: navigator.setAppBadge is not a function。

  • 用 if ('setAppBadge' in navigator) 判断可用性,别只靠 User-Agent
  • PWA 环境下才生效:页面需注册 Service Worker,且在 manifest.json 中设置了 "display": "standalone" 或 "minimal-ui"
  • 桌面端 Chrome 有严格限制:只有从主屏幕安装的 PWA 才能显示徽章;Windows/macOS 的任务栏徽章默认关闭,用户需手动开启「在任务栏上显示应用徽章」系统设置

setAppBadge() 只接受正整数,传错类型会静默失败

setAppBadge() 参数不是字符串也不是浮点数,必须是大于 0 的整数。传 0、null、"5"、5.2 都不会报错,但徽章不会出现——这是最常被忽略的坑。

Article To Html
Article To Html

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

下载
  • 正确写法:navigator.setAppBadge(7)
  • 错误写法:navigator.setAppBadge("7")(字符串)、navigator.setAppBadge(0)(清空要用 clearAppBadge())
  • 业务中建议封装一层:updateBadge(count) { if (Number.isInteger(count) && count > 0) navigator.setAppBadge(count); }

清除徽章不能用 setAppBadge(0),必须调 clearAppBadge()

很多开发者以为设为 0 就能隐藏徽章,实际 setAppBadge(0) 是无效操作,徽章会保持上一次有效值。真正清空只能靠 navigator.clearAppBadge()。

  • 未安装 PWA 时调用 clearAppBadge() 不会报错,但无效果
  • Service Worker 失效或页面离线时,调用仍会成功返回 Promise,但徽章状态不会同步更新(本地缓存可能滞后)
  • 推荐组合使用:if (count > 0) await navigator.setAppBadge(count); else await navigator.clearAppBadge();

徽章数字不自动同步,需自行管理状态和触发时机

Badging API 不感知业务逻辑,它只是“画一个数字”。消息未读数变化、订单待处理数更新,都得由你监听并主动调用 API —— 没有自动绑定机制。

  • 常见遗漏点:切换标签页后忘记重置徽章(比如用户已读消息,但页面没触发 clearAppBadge())
  • 避免频繁调用:连续多次 setAppBadge() 可能被节流,建议做防抖或合并计数
  • 注意权限模型:首次调用会触发浏览器权限提示(仅 Chrome),用户拒绝后后续调用将被静默忽略,且无 API 可检测是否被拒
徽章数字本身不带样式控制,也不支持自定义颜色或位置;它完全由操作系统渲染,开发者只能决定“显不显示”和“显示几”。跨平台表现差异大,别把它当 UI 组件用。

大量免费API接口:立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游,为数据API应用能力赋能!

相关专题

更多
html版权符号
html版权符号

html版权符号是“©”,可以在html源文件中直接输入或者从word中复制粘贴过来,php中文网还为大家带来html的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

2023.06.14

5875

7

html在线编辑器
html在线编辑器

html在线编辑器是用于在线编辑的工具,编辑的内容是基于HTML的文档。它经常被应用于留言板留言、论坛发贴、Blog编写日志或等需要用户输入普通HTML的地方,是Web应用的常用模块之一。php中文网为大家带来了html在线编辑器的相关教程、以及相关文章等内容,供大家免费下载使用。

2023.06.21

3312

4

html网页制作
html网页制作

html网页制作是指使用超文本标记语言来设计和创建网页的过程,html是一种标记语言,它使用标记来描述文档结构和语义,并定义了网页中的各种元素和内容的呈现方式。本专题为大家提供html网页制作的相关的文章、下载、课程内容,供大家免费下载体验。

2023.07.31

2990

5

html空格
html空格

html空格是一种用于在网页中添加间隔和对齐文本的特殊字符,被用于在网页中插入额外的空间,以改变元素之间的排列和对齐方式。本专题为大家提供html空格的相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.01

2999

5

html是什么
html是什么

HTML是一种标准标记语言,用于创建和呈现网页的结构和内容,是互联网发展的基石,为网页开发提供了丰富的功能和灵活性。本专题为大家提供html相关的各种文章、以及下载和课程。

2023.08.11

4799

6

html字体大小怎么设置
html字体大小怎么设置

在网页设计中,字体大小的选择是至关重要的。合理的字体大小不仅可以提升网页的可读性,还能够影响用户对网页整体布局的感知。php中文网将介绍一些常用的方法和技巧,帮助您在HTML中设置合适的字体大小。

2023.08.11

2961

3

html转txt
html转txt

html转txt的方法有使用文本编辑器、使用在线转换工具和使用Python编程。本专题为大家提供html转txt相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.31

2769

3

html文本框代码怎么写
html文本框代码怎么写

html文本框代码:1、单行文本框【<input type="text" style="height:..;width:..;" />】;2、多行文本框【textarea style=";height:;"></textare】。

2023.09.01

2448

6

HTML嵌入CSS样式的方法
HTML嵌入CSS样式的方法

HTML嵌入CSS样式的方法有内联样式、内部样式表和外部样式表。本专题为大家提供CSS样式相关的文章、下载、课程内容,供大家免费下载体验。

2023.09.20

2488

5

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
GDB 17.2 官方文档集合
GDB 17.2 官方文档集合

共0课时 | 0人学习

Bootstrap 入门安装配置
Bootstrap 入门安装配置

共0课时 | 0人学习

38+ PhpStorm 提示和技巧
38+ PhpStorm 提示和技巧

共1课时 | 221人学习