飞信通知api_网络通知API

飞信通知api

Every UI framework has the same set of widgets which have become almost essential to modern sites: modals, tooltips, button varieties, and notifications.  One problem I find is each site having their own widget colors, styles, and more -- users don't get a consistent experience.  Apparently the W3C felt the same way because they've created a Web Notifications API.  Here's how to use it!

每个UI框架都有相同的小部件集，这些小部件几乎已成为现代网站所必需的：模态，工具提示，按钮变体和通知。 我发现的一个问题是，每个站点都有各自的窗口小部件颜色，样式等，用户无法获得一致的体验。 显然W3C感觉也一样，因为他们已经创建了Web Notifications API 。 这是使用方法！

View Demo 观看演示

JavaScript (The JavaScript)

The first step is basic feature detection, as you would expect, and then you jump into the notification creation code:

第一步是您期望的基本功能检测，然后跳至通知创建代码：

if(window.Notification && Notification.permission !== "denied") {
	Notification.requestPermission(function(status) {  // status is "granted", if accepted by user
		var n = new Notification('Title', { 
			body: 'I am the body text!',
			icon: '/path/to/icon.png' // optional
		}); 
	});
}

Once you confirm the Notification API is supported, you must request notification access from the user.  If the status comes back as "granted", you can create a new notification with a title and body text.

确认支持Notification API后，您必须请求用户的通知访问权限。 如果状态返回为“已授予”，则可以创建带有标题和正文的新通知。

Closing the notification is simple with the close method:

使用close方法关闭通知很简单：

n.close();

View Demo 观看演示

I really like the idea of the browser providing native APIs for common UI components, but I do find it funny that each browser has a different look for notifications.  I do like the simplicity of the Web Notifications API though -- what do you think?

我真的很喜欢浏览器为常见的UI组件提供本机API的想法，但是我确实感到很有趣，每个浏览器都有不同的通知外观。 我确实喜欢Web Notifications API的简单性-您如何看待？

翻译自: https://davidwalsh.name/notifications-api

飞信通知api