通知 API：显示来自您的 Web 应用的通知🔔

大家好。

如果您想为您的 Web 应用程序吸引流量，通知至关重要。

即使用户未在您的网站/Web 应用上处于活动状态，通知也会显示。

无论您是在构建电商网站并希望向用户展示优惠信息，还是在构建聊天应用程序并希望显示新消息通知，通知都能派上用场。

许多顶级 Web 应用程序（例如 Slack、Facebook、WhatsApp 等）都使用相同的技术来显示通知。

使用通知 API 比您想象的要简单得多。

介绍。

通知 API 允许开发者在其网站或 Web 应用程序中显示通知。

通知 API 与您操作系统（Windows、Mac 或 Linux）中现有的通知系统兼容。

如何使用通知 API💭

可以使用Notification全局可用的类来初始化通知。

请求许可⬇️

// asking user to grant the permission on page load
// to show notifications
window.addEventListener('load', () => {
  Notification.requestPermission();
// permission cannot be asked again if the user chose
// to grant or deny the permission.
// once granted or denied, then user have to change the
// permission manually.
});

检查用户是否授予权限⬇️

console.log(Notification.permission);

上述控制台的结果可以是：：

default尚未询问权限，不会显示通知。

granted：用户已授予显示通知的权限。

denied：用户已拒绝该权限。

或者，您也可以使用 Permission API 来检查权限。更多信息请见此处。

显示通知🔔

const newMsgNotification = new Notification('A new message', {
  body: 'You have got a new message, check it out!',
  icon: 'https://images.unsplash.com/photo-1611605698335-8b1569810432?ixid=MnwxMjA3fDB8MHxzZWFyY2h8N3x8aWNvbnN8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
});

上面的代码显示了我的 ubuntu 中的通知，类似这样的👇
。

就是这样，这是您开始需要了解的内容，请继续了解更多。

在上面的例子中，您可以看到Notification类接受 2 arguments。

1. Title通知。
2. Options您可以在其中设置通知设置的对象。

与通知交互：

用户还可以与通知进行交互（就像click在通知上一样）。

EventListener可以添加到通知实例。

// navigate the user to you website when
// user click on a notification
newMsgNotification.addEventListener('click', (e) => {
  e.preventDefault();
  window.open('http://yourwebappurl.com', '_blank');
});

除了click监听器之外，通知还可以监听另外 3 个事件：：

close通知关闭时触发。

error：由于某种原因通知无法显示时触发。

show：通知显示时触发。

好了，本文就到这里，希望大家觉得它有用。

如果觉得有用，请点赞并分享。

以上就是 Notification API 的基础知识，我希望这篇文章简短易懂。

如果您想了解更多信息，请在下方留言。

感谢您的阅读。❤️在Twitter
上关注我