服务人员OnClick事件-如何在窗口中打开带有sw范围的url？ [英] Service Worker onClick event - How to open url in window withing sw scope?

问题描述

我有处理推送通知点击事件的服务人员：

self.addEventListener('notificationclick', function (e) {
    e.notification.close();

     e.waitUntil(
        clients.openWindow(e.notification.data.url)
      );

});

收到通知时，它从数据中获取url并将其显示在新窗口中。

代码可以工作，但是，我想要不同的行为。当用户点击该链接时，它应该检查在服务工作者范围内是否有任何打开的窗口。如果是，则它应聚焦于窗口并导航到给定的URL。

我已检查此answer，但它不完全是我想要的。

你知道怎么做吗？

我写了这段代码，但它仍然不能工作。但是，前两条消息显示在日志中。

self.addEventListener('notificationclick', function (e) {
    e.notification.close();
    var redirectUrl = e.notification.data.redirect_url.toString();
    var scopeUrl = e.notification.data.scope_url.toString();
    console.log(redirectUrl);
    console.log(scopeUrl);

    e.waitUntil(
        clients.matchAll({type: 'window'}).then(function(clients) {
            for (i = 0; i < clients.length; i++) {
                  console.log(clients[i].url);
                  if (clients[i].url.toString().indexOf(scopeUrl) !== -1) {
                        // Scope url is the part of main url
                        clients[i].navigate(givenUrl);
                        clients[i].focus();
                        break;
                  }
            }
        })
    );

});

推荐答案

好的，这段代码可以正常工作。请注意，我正在将scope_url和reDirect_url一起传递到Web通知中。在那之后，我检查Scope_url是否是sw位置的一部分。只有在那之后，我才导航到reDirect_url。

self.addEventListener('notificationclick', function (e) {
    e.notification.close();
    var redirectUrl = e.notification.data.redirect_url;
    var scopeUrl = e.notification.data.scope_url;

    e.waitUntil(
        clients.matchAll({includeUncontrolled: true, type: 'window'}).then(function(clients) {
            for (i = 0; i < clients.length; i++) {
                  if (clients[i].url.indexOf(scopeUrl) !== -1) {
                        // Scope url is the part of main url
                        clients[i].navigate(redirectUrl);
                        clients[i].focus();
                        break;
                  }
            }
        })
    );

});

这篇关于服务人员OnClick事件-如何在窗口中打开带有sw范围的url？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！