如何使用 JavaScript 顯示桌面通知
JavaScript Notifications API 使網頁能夠在不同平台上的設備上向用戶顯示消息。即使在用戶切換標籤或移動到另一個應用程序之後，這些通知也會出現。
這些消息（也稱為 system 或桌面 通知）可用於通知用戶重要事件，例如電子郵件、新社交媒體消息、實時聊天通知、日曆提醒等。您甚至可以使用系統通知發送營銷活動。
在本教程中，我將解釋 Notifications API 在瀏覽器選項卡中打開網站時向用戶顯示消息的基本用法。
瀏覽器支持
Notifications API 是相當新的，它可能不適用於舊瀏覽器。因此，您應該在顯示消息之前明確驗證瀏覽器是否支持 API。您可以通過檢查 window 對像有一個名為 Notification 的屬性 ：
if(!window.Notification) {
console.log('Browser does not support notifications.');
} else {
// display message here
}
在支持的平台上，顯示桌面通知涉及兩件事：請求權限和創建新通知以顯示給用戶。
請求權限
用戶需要授予當前源權限才能顯示桌面通知。您可以使用 Notification.permission 輕鬆檢查用戶是否已授予顯示系統通知的權限 財產。該屬性有以下可能的值：
default- 用戶尚未決定接受來自您網站的通知granted- 用戶已允許您的網站顯示通知denied- 用戶已選擇阻止來自您網站的通知
如果是第一種情況，可以通過requestPermission()向用戶請求權限 通知 API 的方法。它將打開一個對話框，要求用戶允許或阻止來自該站點的通知。一旦用戶做出選擇，該設置將保存在當前會話中。
如果用戶已經拒絕了顯示通知的請求，我們將無能為力。瀏覽器將忽略任何再次顯示通知或請求權限的請求。
if (!window.Notification) {
console.log('Browser does not support notifications.');
} else {
// check if permission is already granted
if (Notification.permission === 'granted') {
// show notification here
} else {
// request permission from user
Notification.requestPermission().then(function(p) {
if(p === 'granted') {
// show notification here
} else {
console.log('User blocked notifications.');
}
}).catch(function(err) {
console.error(err);
});
}
}
requestPermission() 方法返回一個承諾。一旦 promise 被解決或拒絕（根據用戶選擇通知），回調函數將被調用。
顯示通知
如果用戶選擇接受來自我們網站的通知，您可以使用 Notification() 創建新的桌面通知 構造函數將其顯示給用戶。只需將標題傳遞給構造函數即可創建新通知。
var notify = new Notification('Hi there!');
或者，您還可以傳遞一個選項對象來指定文本方向、正文文本、要顯示的圖標、要播放的通知聲音等等。
var notify = new Notification('Hi there!', {
body: 'How are you doing?',
icon: 'https://bit.ly/2DYqRrh',
});
將所有內容放在一起，我們可以創建一個函數，一旦調用就會顯示桌面通知，如果尚未授予權限，則請求權限：
function notifyMe() {
if (!window.Notification) {
console.log('Browser does not support notifications.');
} else {
// check if permission is already granted
if (Notification.permission === 'granted') {
// show notification here
var notify = new Notification('Hi there!', {
body: 'How are you doing?',
icon: 'https://bit.ly/2DYqRrh',
});
} else {
// request permission from user
Notification.requestPermission().then(function (p) {
if (p === 'granted') {
// show notification here
var notify = new Notification('Hi there!', {
body: 'How are you doing?',
icon: 'https://bit.ly/2DYqRrh',
});
} else {
console.log('User blocked notifications.');
}
}).catch(function (err) {
console.error(err);
});
}
}
}
現在我們可以在用戶點擊按鈕時調用上述函數：
<button onclick="notifyMe()">Notify Me</button>
或者，您可以將上述函數綁定到正文 onload 網頁完全加載後將調用的事件：
<!DOCTYPE html>
<html>
<body onload="notifyMe()">
<!-- body content-->
</body>
</html>
結論
這就是使用 JavaScript Notifications API 顯示桌面通知的所有人。這是顯示需要在瀏覽器中打開站點的通知的最簡單方法。以後，我將討論 Notifications API 的更高級用法來發送網絡推送通知 從服務器端。
