Chrome 桌面设备通知示例 [已关闭]

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

• 桌面通知 - 易于触发，只要页面打开即可工作，并可能在几秒钟后自动消失
• 服务工作线程通知 - 有点复杂，但它们可以在后台工作（即使在页面关闭后），是持久的，并支持操作按钮

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

以下是Chrome，Firefox，Opera和Safari的桌面通知的工作示例。请注意，出于安全原因，从 Chrome 62 开始，可能不再从跨源 iframe 请求通知 API 的权限，因此我们无法使用 StackOverflow 的代码段对此进行演示。您需要将此示例保存在网站/应用程序的 HTML 文件中，并确保使用 或 HTTPS。localhost://

// 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 通知 API。不要将其与 Chrome 扩展程序通知 API 混淆，后者是不同的。Chrome扩展程序通知显然仅适用于Chrome扩展程序，并且不需要用户的任何特殊许可。

W3C 通知在许多浏览器中都有效（请参阅对 caniuse 的支持），并且需要用户权限。作为最佳实践，请勿立即请求此权限。首先向用户解释为什么他们需要通知，并查看其他推送通知模式。

请注意，由于此错误，Chrome在Linux上不支持通知图标。

结语

通知支持一直在不断变化，过去几年中各种API已被弃用。如果您感到好奇，请查看之前对此答案所做的编辑，以了解以前在 Chrome 中可以使用的内容，并了解丰富的 HTML 通知的故事。

现在，最新的标准已达到 https://notifications.spec.whatwg.org/。

至于为什么有两个不同的调用具有相同的效果，这取决于你是否在服务工作者中 - 请参阅我在Google工作时提交的这张票证。

另请参阅 notify.js 以获取帮助程序库。

检查设计和 API 规范（它仍然是草稿）或检查源代码（页面不再可用）以获取一个简单的示例：它主要是对 .window.webkitNotifications.createNotification

如果您想要一个更可靠的示例（您正在尝试创建自己的Google Chrome扩展程序，并且想知道如何处理权限，本地存储等），请查看Gmail通告程序扩展程序：下载crx文件而不是安装它，解压缩它并阅读其源代码。