操作按钮推送通知不起作用 |节点 | sw-push

Question

我使用 MEAN 堆栈创建了一个 Web 应用程序，并针对某些事件集成了推送消息通知。但是如何在通知中添加链接，以便用户可以单击并重定向到浏览器上的站点

这是我发送的样本

const notificationPayload = JSON.stringify({
            notification: {
                title: "Hello",
                body: "World,
                icon: <icon link>,
                vibrate: [100, 50],
                data: {
                    dateOfArrival: Date.now(),
                    primaryKey: 1
                },
                actions: [{
                    action: "explore",
                    title: "Checkout",
                    icon: <icon link>,
                    click_action: "https://www.google.com",  // not working
                    url: "https://www.google.com"   // not working
                }]
            }
        });

结果很好，结帐按钮可以点击...但是没有反应

Answer 1

好的，首先，NotificationAction 对象只允许有 3 个键：

1. 动作
2. 标题
3. 图标

所以很自然，click_action 和 url 将被忽略。

关于如何处理操作的问题，您需要根据服务工作者中的 NotificationAction.action 键为数组中的每个操作编写处理程序。详细指南可以在here找到。

示例：

self.registration.showNotification("New mail from Alice", {
  actions: [
    {
      action: 'archive',
      title: 'Archive'
    }
  ]
});

self.addEventListener('notificationclick', function(event) {
  event.notification.close();
  if (event.action === 'archive') {
    // Archive action was clicked
    archiveEmail();
  } else {
    // Main body of notification was clicked
    clients.openWindow('/inbox');
  }
}, false);

参考资料：

1. NotificationAction
2. NotificationEvent.action
3. Notification API
4. Displaying a notification - Web Fundamentals
5. Notification behaviour

Answer 2

我会设置准确的答案，用 ngsw-worker 解决我的问题：

这是我发送的通知，有了它，您可以在 data 属性中发送数据：

notification: {
                title: "hello world,
                body: "you have a notification",
                icon: <user dp url>,
                vibrate: [100, 50],
                data: {
                    dateOfArrival: Date.now(),
                    primaryKey: 1,
                    url: <user's profile URL>   // data to be used
                },
                actions: [{
                    action: "explore",
                    title: "Checkout",
                    icon: '... some address ... jolly-roger.png',
                },
                {
                    action: 'close',
                    title: 'Close'
                }
                ]
            }

现在，打开 ngsw-worker.js。它通常在 dist 的根文件夹中（用于生产准备 rip），或者在node_modules\@angular\service-worker\ngsw-worker.js

这里，转到处理通知点击的行（：1932：在我的情况下）

this.scope.addEventListener('notificationclick', (event) => 

您可以在此处添加有关要打开的 ULR 的代码。示例：

this.scope.addEventListener('notificationclick', (event) => {
                try {
                    clients.openWindow("http://localhost:3000/#/"+event.data.url);
                } catch (e) {
                    clients.openWindow("http://localhost:3000/#/");
                } 
                this.onClick(event)
            });

或者，如果你在 Angular 中处理它，你可以在构造函数中注入 swPush 后重新定义函数：

this._swPush.notificationClicks.subscribe( event => {
      console.log("event = ", event);
});

Salvio 的回答中有其他相关文章。