H5桌面通知/Web Notification

[imuncle]

在使用浏览器插件登录微信的时候，发现一个有趣的现象：在浏览器最小化的情况下，桌面右下角依然可以实现消息弹窗提示

当时就眼睛一亮，觉得这个功能非常有趣也非常实用。经过进一步摸索我发现网页版微博也有这个功能。

这其实是使用了H5的新属性Web Notification，目前还只有Firefox和Chrome支持良好。

获取用户权限

像下图所示的这种其实就是在获取消息提示的权限。我记得之前有段时间，很多网站包括QQ空间，微博，简书等等都出现了这种弹窗，不过现在好像有的就没有了。

（别想了，我就看看，买不起）

总之，想展示弹窗要先拿到用户的允许。获取权限使用方法Notification.requestPermission(callback)，这个方法只能被用户行为调用（比如：onclick 事件），并且不能被其他的方式调用。

Notification.requestPermission(function (permission) {
    console.log('用户是否允许通知： ',permission === 'granted' ? '允许' : '拒绝');
});

Notification.permission是一个静态属性，可以获取用户当前的通知权限状态，返回一个String，可以根据返回值判断用户是否授予了通知权限。返回值有三种情况：

• default：用户还未被询问是否授权，所以通知不会被显示。
• granted：表示之前已经询问过用户，并且用户已经授予了显示通知的权限。
• denied：用户已经明确的拒绝了显示通知的权限。

创建通知

new Notification(title, options)方法创建可以创建一个通知实例，允许参入参数两个参数title和options。一旦通知实例被创建出来，它会立即被显示出来。

title顾名思义，就是通知的标题，必须参数，允许数字、字符串和空。

options是非必须参数，必须为一个对象，它包含：

{
	//通知显示正文。非必须，默认为空
	body: '你的好友XX上线了！',
	
	//通知显示正文的图片地址。非必须，默认为空
	image: 'imgae url',
	
	//通知左侧图标。非必须，默认为空
	icon: 'imgae url',
	
	//通知的分类标记（ID）。非必须，默认为空
	tag: 'test',
	
	//通知相关联的数据，通常用于方法的回调，传参。非必须，默认为空
	data: '可以是任意数据类型',
	
	//通知显示延迟的时间。非必须，默认通知实例创建完成就显示
	timestamp: '',
	
	//通知主体内容的水平展示顺序，有点类似direction属性。非必须，默认值是auto, 可以是ltr或rtl
	dir: 'auto',
	
	//当没有足够的空间来显示通知本身时，用于表示通知的图像的URL。非必须，默认为空
	badge: 'xxx',
	
	//通知的语言。非必须默认为空
	lang: '',
	
	//通知显示时，设备的振动模式。非必须，默认为空
	vibrate: [200, 100, 200],
	
	//新通知出现是否覆盖旧的通知，覆盖（true）则永远只显示一条通知，不覆盖（false）则会多条通知重叠。非必须，默认为true
	renotify: true,
	
	//通知是否静音。非必须，默认为false，表示无声
	silent: false,
	
	//通知声源文件地址。非必须，默认为空
	sound: 'mp3',
	
	//是否不在屏幕上显示通知信息。非必须，默认为false表示要显示
	noscreen: false,
	
	//指定通知是否应该粘滞性，即不容易被用户清理。非必须，默认false表示不具粘滞性
	sticky: false,
	
	//指定通知是否保持活性，知道用户点击或关闭。非必须，默认为false
	requireInteraction: false
}

事件及事件回调函数

• 通知实例具有一个静态方法Notification.close()可以用来关闭通知
• 通知实例具有四个事件回调函数，来跟踪通知当前的状态。这些事件可以通过事件处理跟踪onshow、onclick、onclose和onerror。因为Notification同样继承自EventTarget，因此可以对它调用addEventListener()方法。

var notification = new Notification('你有一条新信息', {
	body: "你好，很高兴认识你",
	icon: "https://imuncle.github.io/images/avatar.jpg"
});

notification.onshow = function () {
	console.log('通知显示了！');
}

notification.onclick = function (e) {
	//可以直接通过实例的方式获取data内自定义的数据
	//也可以通过访问回调参数e来获取data的数据
	window.open(notification.data.url, '_blank');
	notification.close();
}

notification.onclose = function () {
	console.log('通知关闭');
}

notification.onerror = function (err) {
	console.log('出错了');
	throw err;
}

简单示例

function CreateNotify() {
	var notification = new Notification('你有一条新信息', {
		body: "你好，很高兴认识你",
		icon: "https://imuncle.github.io/images/avatar.jpg"
	});
	setTimeout(function() { notification.close(); }, 5000);
}

function notifyMe() {
  // 先检查浏览器是否支持
  if (!("Notification" in window)) {
    alert("This browser does not support desktop notification");
  }

  // 检查用户是否同意接受通知
  else if (Notification.permission === "granted") {
    // 如果没问题，就创建通知
    CreateNotify();
  }

  // 否则我们需要向用户获取权限
  else if (Notification.permission !== 'denied') {
    Notification.requestPermission(function (permission) {
      // 如果用户同意，就可以向他们发送通知
      if (permission === "granted") {
        CreateNotify();
      }
    });
  }
  // 最后，如果执行到这里，说明用户已经拒绝对相关通知进行授权
  // 出于尊重，我们不应该再打扰他们了
}

参考

• notification - Web API 接口参考 | MDN
• H5的Notification特性 - Web的桌面通知功能