共计 1501 个字符，预计需要花费 4 分钟才能阅读完成。
欢送关注我的公众号：前端侦探
在很多客户端应用程序中，个别会通过利用图标的角标来显示以后音讯的数量，例如
其实，web 中也有相似的设定，花两分钟理解一下吧
一、navigator.setAppBadge
当初的 navigator 早已不是以前的 navigator 了，印象中的 navigator 通常用于获取设施的信息，浏览器倒退这么多年，当初 navigator 也赋予了很多原生底层的能力，比方明天要讲到的设置利用图标徽章的能力，navigator.setAppBadge。
语法很简略，如下
navigator.setAppBadge(?contents);这里的 contents 示意要设置的数字，不是必填的。
如果你轻易关上一个网页，而后在控制台执行
navigator.setAppBadge(33);然而并不会有什么变动
起因其实很简略，这时的 Chrome浏览器图标 并不是该网站的利用图标，解决形式有两种
首先如果是一般的网站，比方方才的 MDN官网，须要将该网站创立快捷方式
这样，MDN 官网也有了本人的利用图标
当初从新在控制台执行以上代码
这样利用图标上就有数字提醒了，和一般的应用程序齐全一样
还有另外一种形式，当初有一些 PWA 利用，体验会更好，能够离线应用，比方 vue3 官网，右上角会提醒“装置利用”
装置后关上，而后在控制台执行以上代码
同样能够反对数字展现
二、不同参数的细节
后面提到，参数不是必须的，比方不传参数
navigator.setAppBadge();此时示意数量是不确定的，在 Mac OS 下的体现是这样的，一个红色圆圈
在 windows 下，有磁贴和图标两种展示模式
参数反对的格局是BigUint64Array，简略来说就是非负整数
navigator.setAppBadge(3);实测小数、数字类型的字符串也是反对的
navigator.setAppBadge('3.5');windows 零碎体现如下
如果为0，则会革除标识
navigator.setAppBadge(0);还有一个景象，如果超过 99，则展现为99+
navigator.setAppBadge(100);windows 零碎体现如下（磁贴竟然没有数字了）
三、electron 中的利用
事实上，目前反对 PWA 的网站是少之又少，大多数人也没有将网站快捷方式另存的习惯，所以理论生产中简直没有 setAppBadge 的用武之地。
不过，如果你有开发 electron 的需要，无妨试一下这个办法，完满反对利用图标告诉提醒
相比 electron 原生的办法益处是，能够间接在渲染过程应用，无需通信
四、总结和阐明
以上就是全部内容了，你学会了吗？上面总结一下要点
navigator当初很弱小，反对了很多原生底层的性能navigator.setAppBadge能够用来设置利用图标徽章，也就是右上角的红色数字角标- 浏览器图标并不是该网站的利用图标，须要将网站独自设置快捷方式
- navigator.setAppBadge 传入参数为空时，体现为一个圆圈，示意未知数字，参数为 0 时，会革除角标，参数大于 99 时，会展现为
99+ - 理论状况下简直很少应用，毕竟国内反对
PWA网站不多 - 在
electron开发中也能够完满应用
navigator上面还有很多办法，都是和原生底层相干的，比方对于剪贴板的（Navigator.clipboard），还有能够调用零碎原生分享的（Navigator.share）等等，这些 API会让 web 看起来更加原生，很多以前须要用到客户端 sdk 的能力也在缓缓反对，置信会越来越好的。最初，如果感觉还不错，对你有帮忙的话，欢送点赞、珍藏、转发❤❤❤
欢送关注我的公众号：前端侦探