在很多客戶端應(yīng)用程序中，一般會(huì)通過(guò)應(yīng)用圖標(biāo)的角標(biāo)來(lái)顯示當(dāng)前消息的數(shù)量，例如

其實(shí)，web 中也有類似的設(shè)定，花兩分鐘了解一下吧

一、navigator.setAppBadge

現(xiàn)在的navigator[1]早已不是以前的navigator?了，印象中的navigator?通常用于獲取設(shè)備的信息，瀏覽器發(fā)展這么多年，現(xiàn)在navigator也賦予了很多原生底層的能力，比如今天要講到的設(shè)置應(yīng)用圖標(biāo)徽章的能力，navigator.setAppBadge[2]。

語(yǔ)法很簡(jiǎn)單，如下：

navigator.setAppBadge(?contents);

這里的contents表示要設(shè)置的數(shù)字，不是必填的。

如果你隨便打開(kāi)一個(gè)網(wǎng)頁(yè)，然后在控制臺(tái)執(zhí)行；

navigator.setAppBadge(33);

但是并不會(huì)有什么變化；

原因其實(shí)很簡(jiǎn)單，這時(shí)的 Chrome瀏覽器圖標(biāo)并不是該網(wǎng)站的應(yīng)用圖標(biāo)，解決方式有兩種

首先如果是普通的網(wǎng)站，比如剛才的 MDN官網(wǎng)，需要將該網(wǎng)站創(chuàng)建快捷方式。

這樣，MDN 官網(wǎng)也有了自己的應(yīng)用圖標(biāo)。

現(xiàn)在重新在控制臺(tái)執(zhí)行以上代碼：

這樣應(yīng)用圖標(biāo)上就有數(shù)字提示了，和普通的應(yīng)用程序完全一樣。

還有另外一種方式，現(xiàn)在有一些PWA?應(yīng)用，體驗(yàn)會(huì)更好，可以離線使用，比如vue3官網(wǎng)，右上角會(huì)提示“安裝應(yīng)用”。

安裝后打開(kāi)，然后在控制臺(tái)執(zhí)行以上代碼：

同樣可以支持?jǐn)?shù)字展示。

二、不同參數(shù)的細(xì)節(jié)

前面提到，參數(shù)不是必須的，比如不傳參數(shù)

navigator.setAppBadge();

此時(shí)表示數(shù)量是不確定的，在 Mac OS 下的表現(xiàn)是這樣的，一個(gè)紅色圓圈

在 windows 下，有磁貼和圖標(biāo)兩種展現(xiàn)形式：

參數(shù)支持的格式是BigUint64Array，簡(jiǎn)單來(lái)說(shuō)就是非負(fù)整數(shù)

navigator.setAppBadge(3);

實(shí)測(cè)小數(shù)、數(shù)字類型的字符串也是支持的

navigator.setAppBadge('3.5');

windows 系統(tǒng)表現(xiàn)如下：

如果為0，則會(huì)清除標(biāo)識(shí)

navigator.setAppBadge(0);

還有一個(gè)現(xiàn)象，如果超過(guò) 99?，則展示為99+

navigator.setAppBadge(100);

windows 系統(tǒng)表現(xiàn)如下（磁貼居然沒(méi)有數(shù)字了）。

三、electron 中的應(yīng)用

事實(shí)上，目前支持PWA?的網(wǎng)站是少之又少，大多數(shù)人也沒(méi)有將網(wǎng)站快捷方式另存的習(xí)慣，所以實(shí)際生產(chǎn)中幾乎沒(méi)有setAppBadge的用武之地。

不過(guò)，如果你有開(kāi)發(fā)electron的需求，不妨試一下這個(gè)方法，完美支持應(yīng)用圖標(biāo)通知提示

相比electron原生的方法好處是，可以直接在渲染進(jìn)程使用，無(wú)需通信

四、總結(jié)和說(shuō)明

以上就是全部?jī)?nèi)容了，你學(xué)會(huì)了嗎？下面總結(jié)一下要點(diǎn)：

• navigator 現(xiàn)在很強(qiáng)大，支持了很多原生底層的功能。
• navigator.setAppBadge 可以用來(lái)設(shè)置應(yīng)用圖標(biāo)徽章，也就是右上角的紅色數(shù)字角標(biāo)。
• 瀏覽器圖標(biāo)并不是該網(wǎng)站的應(yīng)用圖標(biāo)，需要將網(wǎng)站單獨(dú)設(shè)置快捷方式。
• navigator.setAppBadge 傳入?yún)?shù)為空時(shí)，表現(xiàn)為一個(gè)圓圈，表示未知數(shù)字，參數(shù)為0時(shí)，會(huì)清除角標(biāo)，參數(shù)大于99時(shí)，會(huì)展示為99+。
• 實(shí)際情況下幾乎很少使用，畢竟國(guó)內(nèi)支持PWA網(wǎng)站不多。
• 在electron開(kāi)發(fā)中也可以完美使用。

navigator?下面還有很多方法，都是和原生底層相關(guān)的，比如關(guān)于剪貼板的（Navigator.clipboard?），還有可以調(diào)用系統(tǒng)原生分享的（Navigator.share?）等等，這些 API?會(huì)讓 web 看起來(lái)更加原生，很多以前需要用到客戶端sdk的能力也在慢慢支持，相信會(huì)越來(lái)越好的。

參考資料

[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?