node.js - 关闭通知的选项

标签 node.js html notifications electron

我正在使用 HTML5 Notification API 创建一个 Electron 应用程序并希望每个通知在用户关闭通知时向用户显示几个选项,如下所示:

阅读 MDN documentation for a Notification constructor 后,我无法找到一种方法来配置通知,使其带有多个选项(上例中的“安装”和“稍后”选项)来关闭它。

options 对象中的 actions 属性(传递给 Notification 构造函数的第二个参数)似乎很有前途,但由于缺乏有关“NotificationAction”对象的文档,因此很难理解如何实现此功能。

来自 MDN 文档:

actions: An array of NotificationActions representing the actions available to the user when the notification is presented. These are options the user can choose among in order to act on the action within the context of the notification itself. The action's name is sent to the service worker notification handler to let it know the action was selected by the user.

目前,关闭通知时我只有一个选项(“关闭”)。

enter image description here

如有任何建议,我们将不胜感激。

最佳答案

在撰写本文时,通知操作尚未得到广泛支持。 Browser Compatability

对于支持它的浏览器,您可以像这样使用它:

self.registration.showNotification('New message from Alice', {
    actions: [
        {action: 'like', title: 'Like'},
        {action: 'reply', title: 'Reply'}
    ]
});

然后获取用户点击的内容,如下所示:

self.addEventListener('notificationclick', function(event) {
    var messageId = event.notification.data;

    event.notification.close();

    if (event.action === 'like') {
        silentlyLikeItem();
    }
    else if (event.action === 'reply') {
        clients.openWindow("/messages?reply=" + messageId);
    }
    else {
        clients.openWindow("/messages?reply=" + messageId);
    }
}, false);

您可以在https://developers.google.com/web/updates/2016/01/notification-actions阅读详细信息。

要查看此操作的实际效果,您可以查看 https://tests.peter.sh/notification-generator/#actions=3

关于node.js - 关闭通知的选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56046430/

相关文章:

node.js - Node + ES6 类 : Setting up a set of cached objects

jquery - Javascript 中的 360 度图像预览(无 Flash)

Android - 通知 channel API >= 26 无法正常工作

xamarin - 在 xamarin 中使用 ACR 通知插件的本地通知

c# - C# 中的非标准 UI

mysql - 在每次迭代中运行查询

node.js - 使用 Mongoose 和 Node.Js 防止重复条目

node.js - npm 错误! 404 未找到 : event-stream@3. 3.6

html - 具有两个等高子项的 Flexbox 布局,其中一个包含带有滚动内容的嵌套 Flexbox

html - 重叠多边形、z-index 和之前/之后