In modern browsers, there are two types of notifications:(在现代浏览器中，有两种类型的通知：)
- Desktop notifications - simple to trigger, work as long as the page is open, and may disappear automatically after a few seconds(桌面通知 - 只需打开页面即可轻松触发，并可在几秒钟后自动消失)
- Service Worker notifications - a bit more complicated, but they can work in the background (even after the page is closed), are persistent, and support action buttons(服务工作者通知 - 有点复杂，但它们可以在后台工作（即使在页面关闭后），是持久性的，并且支持操作按钮)
The API call takes the same parameters (except for actions - not available on desktop notifications), which are well-documented on MDN and for service workers, on Google's Web Fundamentals site.(API调用采用相同的参数（在桌面通知中不可用的操作除外），这些参数在Google的Web Fundamentals站点上有详细记录在MDN和服务工作者上。)
Below is a working example of desktop notifications for Chrome, Firefox, Opera and Safari.(以下是适用于Chrome，Firefox，Opera和Safari的桌面通知的工作示例。)
Note that for security reasons, starting with Chrome 62, permission for the Notification API may no longer be requested from a cross-origin iframe , so we can't demo this using StackOverflow's code snippets.(请注意，出于安全原因，从Chrome 62开始， 可能无法再从跨源iframe请求Notification API的权限 ，因此我们无法使用StackOverflow的代码段进行演示。) You'll need to save this example in an HTML file on your site/application, and make sure to use localhost:// or HTTPS.(您需要将此示例保存在站点/应用程序的HTML文件中，并确保使用localhost://或HTTPS。)
// request permission on page load document.addEventListener('DOMContentLoaded', function() { if (!Notification) { alert('Desktop notifications not available in your browser. Try Chromium.'); return; } if (Notification.permission !== 'granted') Notification.requestPermission(); }); function notifyMe() { if (Notification.permission !== 'granted') Notification.requestPermission(); else { var notification = new Notification('Notification title', { icon: 'http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png', body: 'Hey there! You\'ve been notified!', }); notification.onclick = function() { window.open('http://stackoverflow.com/a/13328397/1269037'); }; } }
<button onclick="notifyMe()">Notify me!</button>
We're using the W3C Notifications API.(我们正在使用W3C Notifications API。)
Do not confuse this with the Chrome extensions notifications API , which is different.(不要将此与Chrome 扩展程序通知API混淆，后者不同。) Chrome extension notifications obviously only work in Chrome extensions, and don't require any special permission from the user.(Chrome扩展程序通知显然只能在Chrome扩展程序中使用，并且不需要用户的任何特殊权限。)
W3C notifications work in many browsers (see support on caniuse ), and require user permission.(W3C通知适用于许多浏览器（请参阅caniuse支持），并需要用户权限。)
As a best practice, don't ask for this permission right off the bat.(作为最佳做法，请勿立即请求此许可。) Explain to the user first why they would want notifications and see other push notifications patterns .(首先向用户解释他们为什么要通知并查看其他推送通知模式 。)
Note that Chrome doesn't honor the notification icon on Linux, due to this bug .(请注意，由于此错误 ，Chrome不会尊重Linux上的通知图标。)
Final words(最后的话)
Notification support has been in continuous flux, with various APIs being deprecated over the last years.(通知支持一直在不断变化，过去几年中各种API都被弃用。)
If you're curious, check the previous edits of this answer to see what used to work in Chrome, and to learn the story of rich HTML notifications.(如果您感到好奇，请查看此答案的先前修改，以查看以前在Chrome中工作的内容，并了解丰富的HTML通知的故事。)
Now the latest standard is at https://notifications.spec.whatwg.org/ .(现在最新的标准是https://notifications.spec.whatwg.org/ 。)
As to why there are two different calls to the same effect, depending on whether you're in a service worker or not - see this ticket I filed while I worked at Google .(至于为什么有两种不同的调用相同的效果，取决于你是否在服务工作者 - 看到我在谷歌工作时提交的这张票 。)
See also notify.js for a helper library.(另请参阅notify.js以获取帮助程序库。)
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
