HTML5新增桌面通知Notification

Notification

注意：此项功能仅在一些支持的浏览器的**安全上下文（HTTPS）**中可用。

构造函数

var myNotification = new Notification(title, options);

参数名	可选值	说明		默认值
title	string	通知的标题（显示在通知窗口的顶部）
options（可选）	object	自定义设置选项
	子参数名	说明	可选值	默认值
	dir	通知的方向	ltr（左到右）、rtl（右到左）、auto（浏览器默认）	auto
	lang	通知的语言	参考ISO 2 字母语言代码
	badge	通知的图像的URL（当没有足够的空间显示通知时）	url
	body	通知的正文（显示在标题下方）	string
	tag	通知的标签
	icon	通知中显示的图标的URL	url
	image	通知中显示的图像的URL	url
	data	与通知相关联的数据	any
	vibrate	一个振动模式 vibration pattern (en-US) 设备的振动硬件在通知触发时发出
	renotify	指定在新通知替换旧通知后是否应通知用户	boolean	false
	requireInteraction	表示通知不应自动关闭	boolean	false
	以下选项列在最新规范中，但在任何浏览器中都不支持
	silent	通知是否应该无声	boolean	false
	sound	通知触发时要播放的音频文件的URL	url
	noscreen	通知触发是否应启用设备的屏幕	boolean	false
	sticky	通知是否应该是“粘”（不易被关闭）	boolean	false

静态属性

这些属性只能用于 Notification 对象自身。

属性名	可选值	说明	默认值
permission（只读）	denied(用户拒绝显示通知)、granted(用户接受显示通知)、default(用户选择是未知的，因此浏览器的行为类似于值是 denied)	当前显示通知的权限
maxActions（只读）	number	设备和用户代理支持的最大的操作数量

实例属性

这些属性仅用于 Notification 实例对象上。

参考上方 options 的配置项。

事件

• click：当用户点击通知时触发。
• close：当用户关闭通知时触发。
• error：当通知发生错误时触发。
• show：当通知显示时触发。

检查浏览器的支持度

function notifyMe() {
  // 浏览器不支持
  if (!("Notification" in window)) {
    alert("This browser does not support desktop notification");
  }
  // 用户接收显示通知
  else if (Notification.permission === "granted") {
    const notification = new Notification("Hi there!");
	// do something...
  }
  // 用户拒绝显示通知
  else if (Notification.permission !== "denied") {
    // 询问是否用户接收显示通知
    Notification.requestPermission().then((permission) => {
      // 用户接收显示通知
      if (permission === "granted") {
        const notification = new Notification("Hi there!");
        // do something...
      }
    });
  }
}