Chrome桌面通知示例

Question

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

Answer 1

在现代浏览器中，有两种通知类型：

• 桌面通知易于触发，只要打开页面即可工作，并且可能在几秒钟后自动消失
• Service Worker通知稍微复杂一点，但是它们可以在后台（即使关闭页面后）也可以工作，并且是持久性的，并支持操作按钮

API调用采用相同的参数（操作除外-在桌面通知中不可用），这些参数已在Google的Web基础站点上的MDN和服务工作者中详细记录。

以下是适用于Chrome，Firefox，Opera和Safari 的 桌面 通知的工作示例。请注意，出于安全原因，从Chrome
62开始，可能不再需要跨源iframe请求NotificationAPI的权限，因此我们无法使用StackOverflow的代码段进行演示。您需要将此示例保存在站点/应用程序的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>

我们正在使用W3C NotificationsAPI。请勿将此与Chrome扩展通知API混淆。Chrome扩展程序通知显然仅在Chrome扩展程序中有效，并且不需要用户的任何特殊权限。

请注意，由于该bug，Chrome无法使用Linux上的通知图标。