Notification API 是浏览器的通知接口,用于在用户的桌面上显示通知信息,桌面电脑和手机都适用。具体的实现形式由浏览器自行部署,对于手机来说,一般显示在顶部的通知栏。

如果网页代码调用这个API,浏览器会询问用户是否接受。只有在用户同意的情况下,通知信息才会显示。

一. 检查浏览器是否支持 Notification API:

if (window.Notification) {
    // 支持
} else {
    // 不支持
}

二. Notification的权限申请:

Notification.requestPermission() 方法用于让用户做出选择,到底是否接收通知。它的参数是一个回调函数,该函数可以接收用户授权状态作为参数。

if(window.Notification && Notification.permission !== "denied") {
    Notification.requestPermission(function(status) {
        // 进行Notification操作
    });
} else {
    // 不支持
}

三. Notification的权限状态:

Notification.permission属性,用于读取用户给予的权限,它是一个只读属性,它有三种状态。如下:

  • default:用户还没有做出任何许可,因此不会弹出通知。
  • granted:用户明确同意接收通知。
  • denied:用户明确拒绝接收通知。

四. Notification构造函数

Notification对象作为构造函数使用时,用来生成一条通知。

var notification = new Notification(title, options);

参数说明:

  • title:【必选】用来指定通知的标题,String类型;
  • options:【可选】配置各种设置,Object类型。

options参数对象的属性如下:

  • dir:文字方向,可能的值为auto、ltr(从左到右)和rtl(从右到左),一般是继承浏览器的设置;
  • lang:使用的语种,比如en-US、zh-CN;
  • body:通知内容,格式为字符串,用来进一步说明通知的目的;
  • tag:通知的ID,格式为字符串。一组相同tag的通知,不会同时显示,只会在用户关闭前一个通知后,在原位置显示;
  • icon:图表的URL,用来显示在通知上。

options参数对象的这些属性,都是可读写的。

例子:

if(window.Notification && Notification.permission !== "denied") {
    Notification.requestPermission(function(status) {
        var n = new Notification('通知标题', { body: '这里是通知内容!' }); 
    });
}

五. 实例对象的事件

  • show:通知显示给用户时触发。
  • click:用户点击通知时触发。
  • close:用户关闭通知时触发。
  • error:通知出错时触发(大多数发生在通知无法正确显示时)。

并不能从通知的close事件,判断它是否为用户手动关闭。

例子:

// 当显示通知时的回调

notification.onshow = function() {
  console.log('Notification shown');
};
// Notification实例的close方法用于关闭通知

var notification = new Notification("Hi!");

notification.close(); // 手动关闭

// 自动关闭
notification.onshow = function () { 
  setTimeout(notification.close.bind(notification), 5000); 
}

六. 兼容性

详细的兼容性信息可查看:http://caniuse.com/#search=Notification

image_1atqhdm9013vmi4ea4ui81dgs9.png-63.6kB

七. 推荐阅读

Web Notifications API(by阮一峰大神) http://javascript.ruanyifeng.com/bom/notification.html

notification API(MDN) https://developer.mozilla.org/zh-CN/docs/Web/API/notification

MDN: Using the Notifications API https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API

本文作者:子匠_Zijor,转载请注明出处:http://www.dengzhr.com/js/1039