如何使用 JavaScript 显示桌面通知

这篇文章最初发表在attacomsian.com/blog上。

JavaScript 通知 API 使网页能够向跨平台用户显示消息。即使用户切换标签页或转到其他应用程序，这些通知仍会显示。

这些消息（也称为系统或桌面通知）可用于通知用户重要事件，例如电子邮件、新的社交媒体消息、实时聊天通知、日历提醒等。您甚至可以使用系统通知来发送营销活动。

在本教程中，我将解释通知 API 的基本用法，以便在浏览器选项卡中打开网站时向用户显示消息。

API 使用

通知 API 相对较新，可能无法在旧版浏览器上运行。因此，在显示通知消息之前，您应该明确验证浏览器是否支持该 API。您可以通过检查window对象是否具有名为的属性来验证Notification：

if(!window.Notification) {
    console.log('Browser does not support notifications.');
} else {
    // display message here
}

在受支持的平台上，显示桌面通知涉及两件事：请求权限和创建新通知显示给用户。

注意：通知 API 要求您的网站使用 SSL 证书。它不适用于不安全的来源（HTTP）。

请求许可

用户需要授予当前源权限才能显示桌面通知。您可以使用属性轻松检查用户是否已授予显示系统通知的权限Notification.permission。此属性具有以下可能的值：

default- 用户尚未决定接受来自您网站的通知
granted- 用户已允许您的网站显示通知
denied- 用户已选择阻止来自您网站的通知

如果是第一种情况，您可以使用 Notifications API 的方法向用户请求权限requestPermission()。它会打开一个对话框，询问用户允许或阻止来自此网站的通知。用户做出选择后，该设置将保存在当前会话中。

如果用户已经拒绝了显示通知的请求，我们就无能为力了。浏览器将忽略任何显示通知的请求或再次请求权限。

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。一旦该 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>

或者，您可以将上述函数绑定到 bodyonload事件，该事件将在网页完全加载后调用：

<!DOCTYPE html>
<html>
<body onload="notifyMe()">
<!-- body content-->
</body>
</html>

✌️ 我撰写有关现代 JavaScript、Node.js、Spring Boot以及所有Web 开发方面的文章。订阅我的新闻通讯，每周获取 Web 开发教程和专业技巧。

喜欢这篇文章吗？ 请在 Twitter 上关注 @attacomsian。你也可以在LinkedIn和DEV上关注我。

文章来源：https://dev.to/attacomsian/how-to-show-desktop-notifications-using-javascript-5aco