在很多客戶端應用程序中，一般會通過應用圖標的角標來顯示當前消息的數(shù)量，例如

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

一、navigator.setAppBadge

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

語法很簡單，如下：

navigator.setAppBadge(?contents);

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

如果你隨便打開一個網(wǎng)頁，然后在控制臺執(zhí)行；

navigator.setAppBadge(33);

但是并不會有什么變化；

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

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

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

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

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

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

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

同樣可以支持數(shù)字展示。

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

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

navigator.setAppBadge();

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

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

參數(shù)支持的格式是BigUint64Array，簡單來說就是非負整數(shù)

navigator.setAppBadge(3);

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

navigator.setAppBadge('3.5');

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

如果為0，則會清除標識

navigator.setAppBadge(0);

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

navigator.setAppBadge(100);

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

三、electron 中的應用

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

不過，如果你有開發(fā)electron的需求，不妨試一下這個方法，完美支持應用圖標通知提示

相比electron原生的方法好處是，可以直接在渲染進程使用，無需通信

四、總結(jié)和說明

以上就是全部內(nèi)容了，你學會了嗎？下面總結(jié)一下要點：

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

navigator?下面還有很多方法，都是和原生底層相關(guān)的，比如關(guān)于剪貼板的（Navigator.clipboard?），還有可以調(diào)用系統(tǒng)原生分享的（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?