服务人员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;
}
}
})
);
});
相关文章