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

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

一、navigator.setAppBadge

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

語法很簡單，如下：

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的能力也在慢慢支持，相信會越來越好的。

參考資料

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