快速了解Navigator API SetAppBadge

发布时间：2025-11-05 07:22:35 来源：创站工坊 作者：域名

在很多客户端应用程序中，快速一般会通过应用图标的快速角标来显示当前消息的数量，例如

其实，快速web 中也有类似的快速设定，花两分钟了解一下吧

一、快速navigator.setAppBadge

现在的快速navigator[1]早已不是以前的navigator​了，印象中的快速navigator​通常用于获取设备的信息，浏览器发展这么多年，快速现在navigator也赋予了很多原生底层的快速能力，比如今天要讲到的快速设置应用图标徽章的能力，navigator.setAppBadge[2]。快速

语法很简单，快速如下：

这里的contents表示要设置的数字，不是快速必填的。

如果你随便打开一个网页，快速然后在控制台执行；

但是并不会有什么变化；

原因其实很简单，这时的 Chrome浏览器图标并不是云服务器提供商该网站的应用图标，解决方式有两种

首先如果是普通的网站，比如刚才的 MDN官网，需要将该网站创建快捷方式。

这样，MDN 官网也有了自己的应用图标。

现在重新在控制台执行以上代码：

这样应用图标上就有数字提示了，和普通的应用程序完全一样。

还有另外一种方式，现在有一些PWA​应用，体验会更好，可以离线使用，比如vue3官网，右上角会提示“安装应用”。

安装后打开，然后在控制台执行以上代码：

同样可以支持数字展示。

前面提到，参数不是必须的，比如不传参数

此时表示数量是不确定的，在 Mac OS 下的表现是b2b信息网这样的，一个红色圆圈

在 windows 下，有磁贴和图标两种展现形式：

参数支持的格式是BigUint64Array，简单来说就是非负整数

实测小数、数字类型的字符串也是支持的

windows 系统表现如下：

如果为0，则会清除标识

还有一个现象，如果超过 99​，则展示为99+

windows 系统表现如下（磁贴居然没有数字了）。

事实上，目前支持PWA​的网站是少之又少，大多数人也没有将网站快捷方式另存的习惯，所以实际生产中几乎没有setAppBadge的用武之地。

不过，如果你有开发electron的需求，不妨试一下这个方法，完美支持应用图标通知提示

相比electron原生的方法好处是，可以直接在渲染进程使用，高防服务器无需通信

以上就是全部内容了，你学会了吗？下面总结一下要点：

navigator​下面还有很多方法，都是和原生底层相关的，比如关于剪贴板的（Navigator.clipboard​），还有可以调用系统原生分享的（Navigator.share​）等等，这些 API​会让 web 看起来更加原生，很多以前需要用到客户端sdk的能力也在慢慢支持，相信会越来越好的。

[1]navigator: https://developer.mozilla.org/en-US/docs/Web/API/Navigator

[2]navigator.setAppBadge: https://developer.mozilla.org/en-US/docs/Web/API/Navigator/setAppBadge​

相关文章