远山

不积跬步，无以至千里

0%

浏览器通知

Posted on In Disqus: 
1
2
3
4
5
6
7
new Notification('有个标题', {
	body: '该吃饭了',
	icon: 'https://i.imgflip.com/2/91cvs.jpg',
	dir: 'ltr',
	lang: 'zh',
	tag: 'first'
});

构造方法

1
let notification = new Notification(title, options);
  • title 一定会被显示的通知标题
  • options 可选的配置参数
    • dir 文字的方向，可选值auto ltr rtl
    • lang 通知使用的语言
    • body 通知中额外显示的字符串
    • tag 标示通知的ID
    • icon URL，通知的图标

静态属性

Notification.permission有三种取值，default默认值，行为和拒绝相同，不显示通知 granted允许通知 denied拒绝通知

兼容性

旧版火狐兼容性写法

Firefox 22(2013.5.14发布)版本之前，要创建一个通知实例必须使用navigator.mozNotification.createNotification方法，下面是兼容性写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function sendNotification(title, options) {
	if ('Notification' in window) {
		sendNotification = function (title, options) {
			return new Notification(title, options);
		}
	} else if ('mozNotification' in navigator) {
		sendNotification = function (title, options) {
			return navigator.mozNotification.createNotification(title,  options.body, options.icon).show();
		}
	} else {
		sendNotification = function (title, options) {
			alert(title + ':' + options.body);
		}
	}

	sendNotification(title, options);
}

请求授权方法新规范

1
2
3
4
5
6
7
// 旧写法
Notification.requestPermission(callback);
// 新规将该方法变成了基于Promise的方法
Notification.requestPermission().then(function (permission) {...});
// 由于旧写法在新版已经弃用，所以可写成如下方式
Notification.requestPermission(function (permission) {...})
	.then(function (permission) {...});

自动关闭写法

1
2
3
4
5
6
7
8
9
10
const generateNot = (title, options) => {
	const n = new Notification(title, options);
	// 点击通知关闭通知
	n.onclick = () => {
		n.close();
	}
	
	// 三秒后自动关闭通知
	const timer = setTimeout(n.close.bind(n), 3000);
}