如何使用JavaScript显示桌面通知
JavaScript Notifications API使网页能够在不同平台上向其设备上的用户显示消息。即使在用户切换选项卡或移动到其他应用程序后，也会显示这些通知。
这些消息（也称为系统或桌面通知）可用于通知用户重要事件，如电子邮件，新社交媒体消息，实时聊天通知，日历提醒等。您甚至可以使用系统通知发送营销活动。
在本教程中，我将解释Notifications API的基本用法，以便在浏览器选项卡中打开网站时向用户显示消息。
API使用
Notifications API相当新，可能无法在旧版浏览器中使用。因此，在显示消息之前，您应该显式验证浏览器是否支持API。你可以通过检查是否这样做 窗口 object有一个叫做的属性 通知：
如果（窗口。通知） { 安慰。日志（“浏览器不支持通知。”）; } 其他 { //在这里显示消息 } 在支持的平台上，显示桌面通知涉及两件事：请求权限和创建要向用户显示的新通知。
请求许可
用户需要授予当前原始权限以显示桌面通知。您可以轻松检查用户是否已授予使用显示系统通知的权限 Notification.permission 属性。此属性具有以下可能值：
-
默认– 用户尚未决定接受来自您网站的通知 -
理所当然– 用户已允许您的网站显示通知 -
否认– 用户已选择阻止来自您网站的通知
如果是第一种情况，您可以使用来请求用户的许可 requestPermission（） Notifications API的方法。它将打开一个对话框，要求用户允许或阻止来自此站点的通知。用户做出选择后，将为当前会话保存设置。
如果用户已拒绝显示通知的请求，我们无法执行任何操作。浏览器将忽略任何再次显示通知或请求权限的请求。
如果 （窗口。通知） { 安慰。日志（“浏览器不支持通知。”）; } 其他 { //检查是否已授予权限 如果 （通知。允许 === “理所当然”） { //在这里显示通知 } 其他 { //请求用户的许可 通知。requestPermission（）。然后（功能（p） { 如果（p === “理所当然”） { //在这里显示通知 } 其他 { 安慰。日志（'用户屏蔽了通知。'）; } }）。抓住（功能（呃） { 安慰。错误（呃）; }）; } } 该 requestPermission（） method返回一个promise。一旦解决或拒绝承诺（用户选择通知），将调用回调函数。
显示通知
如果用户已选择接受来自我们网站的通知，您可以使用创建新的桌面通知 通知（） 构造函数将其显示给用户。只需将标题传递给构造函数即可创建新通知。
VAR 通知 = 新 通知（'嗨，您好'）; 或者，您也可以传递选项对象以指定文本方向，正文文本，要显示的图标，要播放的通知声音等。
VAR 通知 = 新 通知（'嗨，您好'， { 身体： '你好吗？'， 图标： 'https://bit.ly/2DYqRrh'， }）; 将所有内容放在一起，我们可以创建一个函数，一旦调用就会显示桌面通知，如果尚未授予请求权限：
功能 提醒我（） { 如果 （窗口。通知） { 安慰。日志（“浏览器不支持通知。”）; } 其他 { //检查是否已授予权限 如果 （通知。允许 === “理所当然”） { //在这里显示通知 VAR 通知 = 新 通知（'嗨，您好'， { 身体： '你好吗？'， 图标： 'https://bit.ly/2DYqRrh'， }）; } 其他 { //请求用户的许可 通知。requestPermission（）。然后（功能 （p） { 如果 （p === “理所当然”） { //在这里显示通知 VAR 通知 = 新 通知（'嗨，您好'， { 身体： '你好吗？'， 图标： 'https://bit.ly/2DYqRrh'， }）; } 其他 { 安慰。日志（'用户屏蔽了通知。'）; } }）。抓住（功能 （呃） { 安慰。错误（呃）; }）; } } } 现在我们可以在用户点击按钮时调用上面的函数：
<按钮 的onclick =“提醒我（）”>提醒我 或者，您可以将上述函数绑定到body 负载 一旦网页完全加载就会调用的事件：
<体 的onload =“提醒我（）”>