如何发送 Chrome/浏览器通知

我花了一段时间在 StackOverflow 等网站上查找如何发送浏览器通知，但结果发现其实很简单。接下来我将带你学习一个制作简单通知发送功能的教程。

一开始，当调用该函数时，它必须先请求权限，但之后它将能够发送各种通知。

让我们开始吧！！

首先，我们来创建一个函数。它有三个参数。一个用于标题，一个用于消息，最后一个用于图标。

function sendNotif(title, text, icon){

}

接下来，为了安全起见，让我们确保浏览器支持通知。

if (!("Notification" in window)) {
  console.warn("Your Browser does not support Chrome Notifications :(")
}

让我们用连接 if 语句else if。此语句测试通知状态是否已授予。如果已授予，则会发送通知。

else if (Notification.permission === "granted") {
  // If it's okay let's create a notification
  let notif = new Notification(title, {
    icon: icon,
    body: text
  });
}

尽管如此，我们还是要链接到 else-if 语句。让我们再添加一个。如果权限未被授予或拒绝，此语句将请求权限。

else if (Notification.permission !== 'denied') {
  //request notification permission
  Notification.requestPermission((perm) => {
    //save permission status
    if (!('permission' in Notification)) {
      Notification.permission = perm;
    }

    //if granted, send a notification immediately
    if (perm === "granted") {
      let notif = new Notification(title, {
        icon: icon,
        body: text
      });
    }
  });
}

就这样就完成了。你的函数应该运行良好。为了进行额外的错误处理，我们在链的末尾添加一个 else 语句，如果当前通知未被拒绝或允许，则将其记录到控制台。

else {
  console.warn(`Failed, Notification Permission is ${Notification.permission}`);
}

玩得开心，不要向网站或用户发送垃圾通知。
祝您编码愉快。

文章来源：https://dev.to/ironcladdev/how-to-send-chrome-browser-notifications-28jg