我正在Chrome版本42.0.2311.152m下进行测试,并且想要实现在notificationclick上打开一个窗口,如下例所示:(源:https://developer.mozilla.org/en-US/docs/Web/API/WindowClient
)
self.addEventListener('notificationclick', function(event) {
console.log('On notification click: ', event.notification.tag);
event.notification.close();
// This looks to see if the current is already open and
// focuses if it is
event.waitUntil(clients.matchAll({
type: "window"
}).then(function(clientList) {
for (var i = 0; i < clientList.length; i++) {
var client = clientList[i];
if (client.url == '/' && 'focus' in client)
return client.focus();
}
if (clients.openWindow)
return clients.openWindow('/');
}));
});
我的文件结构是这样的:
https://myurl.no-ip.org/app/index.html
https://myurl.no-ip.org/app/manifest.json
https://myurl.no-ip.org/app/service-worker.js
我有一个问题,我总是得到
InvalidAccessError
在service-worker.js中调用clients.openWindow('/')或clients.openWindow('https://myurl.no-ip.org/app/index.html')时,收到错误消息:
{code: 15,
message: "Not allowed to open a window.",
name: "InvalidAccessError"}
永远不会到达“ return client.focus()”行,因为client.url绝不会只是“ /”。
看着
clients.matchAll({type: "window"})
.then(function (clientList) {
console.log(clientList[0])});
我看到当前的WindowClient:
{focused: false,
frameType: "top-level",
url: "https://myurl.no-ip.org/app/index.html",
visibilityState: "hidden" }
属性“ focused”和“ visibilityState”正确且正确更改。
通过手动聚焦
clients.matchAll({type: "window"})
.then(function (clientList) {
clientList[0].focus()});
我收到错误:
{code: 15,
message: "Not allowed to focus a window.",
name: "InvalidAccessError"}
我认为问题在于网址不只是'/'。您对此有什么想法吗?
非常感谢你!
最好的祝福
和我
最佳答案
您的代码对我来说很好用,所以我将解释使用openWindow
/ focus
的要求以及如何避免出现“不允许[打开|聚焦]窗口”错误消息。
只有在单击通知后(至少在Chrome 47中),才允许使用clients.openWindow()
和windowClient.focus()
,并且在单击处理程序期间,最多可以调用这些方法之一。此行为在https://github.com/slightlyoff/ServiceWorker/issues/602中指定。
如果您的openWindow
/ focus
呼叫被拒绝并显示错误消息
“不允许打开窗户。”对于openWindow
“不允许聚焦窗口。”对于focus
则您不满足openWindow
/ focus
的要求。例如(所有点也适用于focus
,而不仅仅是openWindow
)。
未单击通知时调用了openWindow
。openWindow
处理程序返回后,调用了notificationclick
,并且您未通过承诺调用event.waitUntil
。
传递给openWindow
的承诺解决后,调用event.waitUntil
。
该诺言尚未解决,但是花费了太长的时间(10 seconds in Chrome),因此调用openWindow
的临时权限已过期。
确实有必要在openWindow
处理程序完成之前最多调用一次focus
/ notificationclick
。
正如我之前所说,问题中的代码有效,因此我将展示另一个带注释的示例。
// serviceworker.js
self.addEventListener('notificationclick', function(event) {
// Close notification.
event.notification.close();
// Example: Open window after 3 seconds.
// (doing so is a terrible user experience by the way, because
// the user is left wondering what happens for 3 seconds.)
var promise = new Promise(function(resolve) {
setTimeout(resolve, 3000);
}).then(function() {
// return the promise returned by openWindow, just in case.
// Opening any origin only works in Chrome 43+.
return clients.openWindow('https://example.com');
});
// Now wait for the promise to keep the permission alive.
event.waitUntil(promise);
});
index.html
<button id="show-notification-btn">Show notification</button>
<script>
navigator.serviceWorker.register('serviceworker.js');
document.getElementById('show-notification-btn').onclick = function() {
Notification.requestPermission(function(result) {
// result = 'allowed' / 'denied' / 'default'
if (result !== 'denied') {
navigator.serviceWorker.ready.then(function(registration) {
// Show notification. If the user clicks on this
// notification, then "notificationclick" is fired.
registration.showNotification('Test');
});
}
});
}
</script>
PS。服务人员仍在开发中,因此值得一提的是,我已验证上述说明在Chrome 49中是正确的,并且该示例在Chrome 43+中可用(并且打开
/
而不是https://example.com
也可以在Chrome中使用42)。关于google-chrome - client.openWindow()“不允许打开窗口。”在serviceWorker Google Chrome上,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/30302636/