Chrome 推送通知 - 点击后如何打开 URL 地址？答案

【问题标题】：Chrome push notification - how to open URL adress after click?Chrome 推送通知 - 点击后如何打开 URL 地址？
【发布时间】：2017-01-18 00:23:07
【问题描述】：

我是 Google 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',
                });

            });
        }
    });

}

它只是简单的通知，但我需要在点击通知后打开一个带有其他网页的新窗口。

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

请帮忙。谢谢。

【问题讨论】：

标签： javascript google-chrome push-notification

【解决方案1】：

我猜你是在 Service Worker 上下文中，因为那是接收推送通知的地方。所以你有 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);
            }
        })
    );
});

【讨论】：

我需要这个修改，clients.matchAll({ includeUncontrolled: true, type: 'window' })，让它工作。
这个神秘的未定义“客户”变量应该是什么
@stackers developer.mozilla.org/en-US/docs/Web/API/Clients
我应该把这个事件监听器放在哪里？在我的 fcm 服务人员或其他地方？因为我在 fcm sw 中尝试过，但它对我不起作用
完美运行，@S.Aminnejad 你可以把它放在 firebase-messaging-sw.js 中

【解决方案2】：

如果您想使用从 FCM 推送通知或任何其他网络推送通知收到的动态 URL 打开网站，那么

以下是用于 FCM 推送通知的 SERVICE Worker 示例

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);

希望对你有帮助！

【讨论】：

【解决方案3】：

（此代码指的是firebase消息传递）我也在寻找解决方案，答案很简单，但没有文档说清楚。您需要将“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"
         }

希望对你有帮助。

【讨论】：

其他答案什么也没做......点击通知没有打开任何东西。这个答案有效而且简单得多。
click_action 不是官方浏览器通知 API 的一部分。以上答案仅适用于 Firebase 推送通知。
Notification API官方没有这个选项：developer.mozilla.org/en-US/docs/Web/API/Notification

【解决方案4】：

{

 "notification": {

   "title": "Hey there",

   "body": "Subscribe to might ghost hack youtube channel",

   "click_action" : "http://localhost:4200"

 },

 "to":"YOUR_TOKEN"

}

这对我有用

"@angular/fire": "^6.1.5",

"firebase": "^7.0 || ^8.0"

【讨论】：