服务人员OnClick事件-如何在窗口中打开带有sw范围的url?

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

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

});

相关文章