有哪些方法可以显示来自 Web 应用程序的桌面通知？答案

【问题标题】：What ways are out there to display a desktop notification from a web app?有哪些方法可以显示来自 Web 应用程序的桌面通知？
【发布时间】：2025-11-25 12:25:01
【问题描述】：

我想做的是最好显示类似烤面包机的通知，但任何将更新“推送”到桌面的方法都很有趣。

谢谢

【问题讨论】：

要将来自网站的通知显示为弹出窗口，您可以使用 alert。
@harry。谢谢，但我正在寻找一个也是很好的 ui 实践的解决方案。
如何对asp.net中的windowsforms做同样的事情？ @reshefm

标签： web-applications notifications desktop

【解决方案1】：

以下是 Chrome、Firefox、Opera 和 Safari 桌面通知的工作示例，复制自 Chrome desktop notification example。
现场体验on JSBin。

// request permission on page load
document.addEventListener('DOMContentLoaded', function () {
  if (Notification.permission !== "granted")
    Notification.requestPermission();
});

function notifyMe() {
  if (!Notification) {
    alert('Desktop notifications not available in your browser. Try Chromium.'); 
    return;
  }

  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("https://*.com/a/13328397/1269037");      
    };

  }

}

<button onclick="notifyMe()">Notify me!</button>

在我对Chrome desktop notification example 的回复中了解有关其工作原理的更多信息。

【讨论】：

@Dan：使用window.open，您将传递一个特定的 URL，以便在点击时打开。有什么方法可以打开引发通知的选项卡吗？
这个已经过时了。更好的例子是Mozilla Developer Network。
@FrançoisBeausoleil：谢谢，我已经更新了我的答案。可以删除我们的两个 cmets 吗？
感谢您提供信息丰富的帖子。理解这个通知结构对我有很大帮助。
复制和粘贴 = 在 chrome、firefox、opera 和 edge 上完美运行！虽然不适用于ie。（赞成）

【解决方案2】：

在 Chrome 上，您可以使用桌面通知来实现类似的功能。例如，请参阅Chrome desktop notification example。

如果您的用户在他们的机器上安装了咆哮，您应该查看growl developer page

【讨论】：