在很多客户端应用中，一般会通过应用图标的角标显示当前消息条数。比如网上就有类似的设置。花两分钟时间理解。1.navigator.setAppBadge当前navigator[1]不再是之前的navigator。我印象中的导航器一般是用来获取设备信息的。浏览器经过这么多年的发展，导航器也赋予了很多原生的底层能力，比如今天。说说设置app图标徽章的能力，navigator.setAppBadge[2]。语法很简单，如下：navigator.setAppBadge(?contents);这里的内容代表要设置的数字，不是必须的。如果只是打开一个网页，在控制台执行；navigator.setAppBadge(33);但不会有任何改变；原因其实很简单，此时Chrome浏览器的图标不是网站的应用程序图标，解决方法有两种。首先，如果是普通网站，比如刚才的MDN官网，需要创建网站的快捷方式。这样，MDN官网也有了自己的应用图标。现在在控制台重新执行上面的代码：这样，应用图标上就会有一个数字提示，和普通应用一模一样。还有另一种方法。现在有一些PWA应用，体验会更好，而且可以离线使用。比如vue3官网，右上角会有“安装应用”的提示。安装后打开，然后在控制台执行上面的代码：也可以支持数字显示。2.不同参数的细节上面说了参数不是必须的，比如navigator.setAppBadge()如果不传参数；这个时候数量是不确定的，MacOS下的表现是这样的，windows下是一个红圈，有tile和icons两种显示形式：参数支持的格式是BigUint64Array，简直是非-负整数navigator.setAppBadge(3);也支持测量的十进制和数字字符串navigator.setAppBadge('3.5');windows系统的表现如下：如果为0，标志会被清除navigator.setAppBadge(0);还有一个现象，如果超过99，就会显示为99+navigator.setAppBadge(100);windows系统的性能如下（磁贴上没有数字）。3.electron中的应用其实目前支持PWA的网站非常少，而且大部分人没有保存网站快捷方式的习惯，所以setAppBadge在实际生产中几乎没有用处。不过，如果你需要开发electron，不妨试试这个方法。完美支持应用图标通知提示。与electron的native方法相比，优点是可以直接在渲染过程中使用，不需要通信。4.总结与说明以上就是全部内容，你学会了吗？总结一下要点吧：navigator现在已经很强大了，支持很多原生的底层功能。navigator.setAppBadge可用于设置应用程序图标徽章，即右上角的红色数字角标。浏览器图标不是网站的应用程序图标，需要为网站单独设置快捷方式。当navigator.setAppBadge的入参为空时，会显示为一个圆圈，代表一个未知数。当参数为0时，徽章将被清除。当参数大于99时，显示为99+。实际中很少用到，毕竟国内支持PWA的网站不多。它也可以完美地用于电子开发。navigator下有很多方法，都是和原生底层相关的，比如剪贴板（Navigator.clipboard），还有可以调用系统的原生分享（Navigator.share）等等，网上看的比较多native，很多以前需要使用客户端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/导航器/setAppBadge
