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

Posted 2023-02-22

【中文标题】有哪些方法可以显示来自 Web 应用程序的桌面通知？

【英文标题】：What ways are out there to display a desktop notification from a web app?

【发布时间】：2011-08-30 21:02:01

【问题描述】：

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

谢谢

【问题讨论】：

要将来自网站的通知显示为弹出窗口，您可以使用 alert。

@harry。谢谢，但我正在寻找一个也是很好的 ui 实践的解决方案。

如何对asp.net中的windowsforms做同样的事情？ @reshefm

【参考方案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