html5桌面通知自动关闭时间,H5 notification浏览器桌面通知

Notification是HTML5新增的API，用于向用户配置和显示桌面通知。上次在别的网站上看到别人的通知弹窗，好奇之余也想知道如何实现的。实际去查一下发现并不复杂，且可以说比较简单，故写篇博客分享给大家,希望能帮你们了解这个API。

npm包：

我还发了一个npm包:notification-Koro1，非常轻量简洁，觉得不错的话，点个Star吧~

chrome下Notification的表现：

以谷歌为例，一开始需要用户允许通知：

允许通知之后，显示的通知长这样：

Notification特性

该通知是脱离浏览器的，即使用户没有停留在当前标签页，甚至最小化了浏览器，也会在主屏幕的右上角显示通知，然后在一段时间后消失。

我们可以监听通知的显示，点击，关闭等事件,比如点击通知打开一个页面。

栗子：去各个网站里面的控制台去运行

API的具体细节，等下再说，先试试这个API~

下面是一个简单的栗子，大家可以先在各个网站的控制台里面运行查看Notification的效果：

var options = {

dir: "auto", // 文字方向

body: "通知：OBKoro1评论了你的朋友圈", // 通知主体

requireInteraction: true, // 不自动关闭通知

// 通知图标

icon: "https://upload-images.jianshu.io/upload_images/5245297-818e624b75271127.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"

};

notifyMe('这是通知的标题', options);

function notifyMe(title, options) {

// 先检查浏览器是否支持

if (!window.Notification) {

console.log('浏览器不支持通知');

} else {

// 检查用户曾经是否同意接受通知

if (Notification.permission === 'granted') {