Javascript Chrome推送通知-单击后如何打开URL地址？

我是谷歌Chrome推送通知的新手，我刚刚在这里阅读了一些关于stackoverflow的问题和答案，我以这个简单的推送通知javascript结束

  navigator.serviceWorker.register('sw.js');

function notify() {

    Notification.requestPermission(function(result) {

        if (result === 'granted') {
           navigator.serviceWorker.ready.then(function(registration) {

                registration.showNotification('test notification', {
                    body: 'Hey I am test!',
                    icon: 'image.png',
                });

            });
        }
    });

}

这只是一个简单的通知，但我需要打开一个新的窗口与其他网页后，点击通知

self.addEventListener('notificationclick', function(event) {
    let url = 'https://example.com/some-path/';
    event.notification.close(); // Android needs explicit close.
    event.waitUntil(
        clients.matchAll({type: 'window'}).then( windowClients => {
            // Check if there is already a window/tab open with the target URL
            for (var i = 0; i < windowClients.length; i++) {
                var client = windowClients[i];
                // If so, just focus it.
                if (client.url === url && 'focus' in client) {
                    return client.focus();
                }
            }
            // If not, then open the target URL in a new window/tab.
            if (clients.openWindow) {
                return clients.openWindow(url);
            }
        })
    );
});

我知道这是可能的，但我找不到使用“serviceWorker”语法的示例

---

请帮忙。谢谢。

我猜您是在服务人员上下文中，因为这是接收推送通知的地方。因此，您有了要添加事件侦听器的

self

对象，该对象将对单击通知作出反应

self.addEventListener('notificationclick', function(event) {
    let url = 'https://example.com/some-path/';
    event.notification.close(); // Android needs explicit close.
    event.waitUntil(
        clients.matchAll({type: 'window'}).then( windowClients => {
            // Check if there is already a window/tab open with the target URL
            for (var i = 0; i < windowClients.length; i++) {
                var client = windowClients[i];
                // If so, just focus it.
                if (client.url === url && 'focus' in client) {
                    return client.focus();
                }
            }
            // If not, then open the target URL in a new window/tab.
            if (clients.openWindow) {
                return clients.openWindow(url);
            }
        })
    );
});

self.addEventListener（'notificationclick'，函数（事件）{
让url为空https://example.com/some-path/';
event.notification.close（）；//Android需要显式关闭。
event.waitill(
matchAll（{type:'window'}）。然后（windowClients=>{
//检查是否已打开带有目标URL的窗口/选项卡
对于（var i=0；i

如果您想打开从FCM推送通知或任何其他web推送通知接收到动态URL的网站，则

下面是用于FCM推送通知的服务工作者的示例

messaging.setBackgroundMessageHandler(function(payload) {

    console.log('[firebase-messaging-sw.js] Received background message ', payload);
  // Customize notification here
  var notificationTitle = payload.data.title; //or payload.notification or whatever your payload is
  var notificationOptions = {
    body: payload.data.body,
    icon: payload.data.icon,
    data: { url:payload.data.click_action }, //the url which we gonna use later
    actions: [{action: "open_url", title: "Read Now"}]
  };

  return self.registration.showNotification(notificationTitle,
    notificationOptions);
});

并用下面的代码处理单击事件

self.addEventListener('notificationclick', function(event) {

  switch(event.action){
    case 'open_url':
    clients.openWindow(event.notification.data.url); //which we got from above
    break;
    case 'any_other_action':
    clients.openWindow("https://www.example.com");
    break;
  }
}
, false);

---

希望有帮助

我也在寻找解决方案，答案很简单，但没有医生说得很清楚。您需要将“click_action”=“your url”放在通知json中。以下是一个例子：

notification: {
          title: "Come",
          icon: '../../../../assets/logo.png',
          vibrate: [300,100,400,100,400,100,400],
          body: "some text",
          click_action : "your link"
         }

---

希望有帮助。

我需要这个修改，clients.matchAll（{includeUncontrolled:true，键入：'window'}），才能让它工作。这个神秘的未定义的“clients”变量应该是什么be@stackers我应该把这个eventListener放在哪里？在我的fcm服务人员或其他地方？因为我在fcm sw中尝试过，但它对meWorks的效果并不理想，@S.Aminnejad您可以将其放在firebase-messaging-sw.js中，其他答案没有任何作用。。。。单击通知没有打开任何内容。此答案有效且简单得多。单击操作不是官方浏览器通知API的一部分。以上答案仅适用于Firebase推送通知。官方通知API中没有此类选项：