Chrome桌面通知示例 [英] Chrome desktop notification example

问题描述

如何使用 Chrome桌面通知 ？我想在自己的代码中使用它。

更新：这里是一篇博客文章，以一个例子解释webkit通知。

解决方案

以下是适用于Chrome，Firefox，Opera和Safari的桌面通知的实用示例。请注意，出于安全原因，从Chrome 62开始，对于Notification API的权限可能不再被请求，原始iframe ，因此您需要将此示例保存在网站/应用程序的HTML文件中，并确保使用HTTPS。

  //请求页面加载许可
 document.addEventListener（'DOMContentLoaded'，function（）{
 if（！Notification）{$ b $ （'Notification.permission！==granted）$（$'b 
 
 $ b if'（Notification.permission！==granted）
 Notification.requestPermission（）; 
}）; 
 $ b函数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）; 
}; 
 
 
 
 $ b b 
 
 
 < button onclick =notifyMe（）>通知我！< / button> 
  
 
 
 
 
 
 
我们使用 W3C Notifications  API，记录在 MDN 。请勿将此内容与 Chrome扩展程序通知API 混淆，这是不同的。 Chrome扩展程序通知显然仅适用于Chrome扩展程序，不需要用户的任何特殊许可，支持丰富的文本通知，但会自动消失，用户可能不会注意到它们已被触发）。 W3C通知可在许多浏览器中使用（请参阅 caniuse 上的支持），需要用户许可，堆叠在之前的通知并且不会在Chrome中自动消失（他们在Firefox中执行）。  
 
 
结束语
 
 
 
通知支持持续不断，不同的API在过去三年中不再使用。如果您很好奇，请查看此答案的以前修改，以了解Chrome中的工作原理，并了解丰富的HTML通知。
 
 
 
现在最新标准位于 https://notifications.spec.whatwg.org/ 。
 
 
 
还有不同的电话号码（尽管使用相同的参数）从服务工作者创建通知，其中出于某种原因，不能访问 Notification（）构造函数。
 
 
 
请参阅也可以 notify.js 获取帮助程序库。
 
How does one use Chrome desktop notifications? I'd like that use that in my own code.

Update: Here's a blog post explaining webkit notifications with an example.
解决方案
Below is a working example of desktop notifications for Chrome, Firefox, Opera and 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 you'll need to save this example in an HTML file on your site/application, and make sure to use 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, documented at MDN. Do not confuse this with the Chrome extensions notifications API, which is different. Chrome extension notifications obviously only work in Chrome extensions, don't require any special permission from the user, support rich text notifications, but disappear automatically and the user may not notice they have been triggered). W3C notifications work in many browsers (see support on caniuse), require user permission, stack on top of the previous notification and don't automatically disappear in Chrome (they do in Firefox).

Final words

Notification support has been in continuous flux, with various APIs being deprecated over the last three years. 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.

Now the latest standard is at https://notifications.spec.whatwg.org/.

There's also a different call (though with the same parameters) to create notifications from service workers, which for some reason, don't have access to the Notification() constructor.

See also notify.js for a helper library.

                        
这篇关于Chrome桌面通知示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！