欢迎关注我的公众号：前端侦探在很多客户端应用中，一般会通过应用图标的角来显示当前消息数。比如网上就有类似的设置。当然，花两分钟了解一下1.navigator.setAppBadge当前导航器不再是之前的导航器。我印象中的导航器一般是用来获取设备信息的。浏览器发展了这么多年，现在导航器也赋予了它很多原生的底层功能。能力，比如今天要说的设置应用程序图标徽章的能力，navigator.setAppBadge。语法很简单，如下：navigator.setAppBadge(?contents);这里的内容代表要设置的数字，不是必须的。如果只是打开一个网页，在控制台执行navigator.setAppBadge(33)；但不会有任何改变。原因其实很简单。此时Chrome浏览器的图标并不是网站的应用程序图标。有两种解决方法第一，如果是普通网站，比如刚才的MDN官网，需要创建网站的快捷方式。这样，MDN官网也有了自己的应用图标。现在再次在控制台执行上面的代码，这样应用图标上就会有数字提示，和普通应用完全一样。还有另一种方法。现在有一些PWA应用，体验会更好，而且可以离线使用。比如vue3官网，安装后右上角会提示“Installapplication”打开，然后在console中执行上面的代码也可以支持数字显示2.不同参数的详细说明如上，参数不是必须的，比如没有参数的navigator.setAppBadge()；这个时候数量不定，MacOS下的表现是这样的，windows下一个红圈，里面有tile和icons。参数支持的格式是BigUint64Array，简单来说就是一个非负整数navigator.setAppBadge(3)；导航器还支持测量的十进制和数字字符串。setAppBadge('3.5');windows系统的性能如下。如果为0，标志将被清除。如下（瓦片上没有数字）3.electron中的应用其实目前支持PWA的网站很少，大多数人也没有保存网站快捷方式的习惯，所以setAppBadge中几乎没有实际生产有用。不过，如果你需要开发electron，不妨试试这个方法。完美支持应用图标通知提示。与electron的native方法相比，优点是可以直接在渲染过程中使用，不需要通信。4.总结与说明以上就是全部内容，你学会了吗？让我们总结一下要点。Navigator现在已经很强大了，支持很多原生的底层功能。navigator.setAppBadge可以用来设置应用图标徽章，即右上角红色数字角徽章浏览器图标不是网站的应用图标，需要在网站设置快捷方式navigator.setAppBadge单独设置.当输入参数为空时，会出现一个圆圈，表示未知数。当该参数为0时，角标将被清除。当参数大于99时，显示为99+。实践中很少用到，毕竟国内PWA网站不多，在electron开发中可以完美使用。导航器下面还有很多方法，都是和原生底层相关的，比如剪贴板（Navigator.clipboard），系统原生的分享可以调用（Navigator.share）等等，这些API都会让web看起来更原生，很多以前需要使用客户端SDK的能力也在慢慢支持，相信会越来越好。最后，如果觉得对你有好处和帮助，欢迎点赞、收藏、转发???欢迎关注我的公众号：前端大侦探
