飞信通知api_网络通知API

骑猪看日落 2023-02-22 03:42 29阅读 0赞

飞信通知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][] [观看演示][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][] [观看演示][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][https_davidwalsh.name_notifications-api]

飞信通知api

[Web Notifications API]: https://developer.mozilla.org/en-US/docs/Web/API/Notification/Using_Web_Notifications
[View Demo]: https://davidwalsh.name/demo/notifications-api.php
[https_davidwalsh.name_notifications-api]: https://davidwalsh.name/notifications-api