ServiceWorker WindowClient.导航承诺被拒绝 [英] ServiceWorker WindowClient.navigate promise rejected
本文介绍了ServiceWorker WindowClient.导航承诺被拒绝的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用Firebase Cloud Messaging+Service Worker处理后台推送通知。
单击通知(其中包含一些数据+URL)时,我希望:
- 如果窗口已经位于所需的URL上,请将其置于焦点
- 如果已打开活动选项卡,请导航到URL并将其聚焦
- 如果以上两个条件都不满足,则打开指向该URL的新窗口
第1点和第3点适用于下面的软件代码。
由于某种原因,第二点不起作用。client.navigate()
承诺被拒绝,原因是:
Uncaught (in promise) TypeError: Cannot navigate to URL: http://localhost:4200/tasks/-KMcCHZdQ2YKCgTA4ddd
我以为这可能是因为缺少https,但从我的阅读来看,在使用SW进行开发时,localhost似乎被列入了白名单。
Firebase-Messaging-sw.js:
// Give the service worker access to Firebase Messaging.
// Note that you can only use Firebase Messaging here, other Firebase libraries
// are not available in the service worker.
importScripts('https://www.gstatic.com/firebasejs/3.5.3/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/3.5.3/firebase-messaging.js');
// Initialize the Firebase app in the service worker by passing in the
// messagingSenderId.
firebase.initializeApp({
'messagingSenderId': 'XXXX'
});
const messaging = firebase.messaging();
messaging.setBackgroundMessageHandler(payload => {
console.log('[firebase-messaging-sw.js] Received background message ', payload);
let notificationData = JSON.parse(payload.data.notification);
const notificationOptions = {
body: notificationData.body,
data: {
clickUrl: notificationData.clickUrl
}
};
return self.registration.showNotification(notificationData.title,
notificationOptions);
});
self.addEventListener('notificationclick', event => {
console.log('[firebase-messaging-sw.js] Notification OnClick: ', event);
// Android doesn’t close the notification when you click on it
// See: http://crbug.com/463146
event.notification.close();
// This looks to see if the current is already open and
// focuses if it is
event.notification.close();
let validUrls = /localhost:4200/;
let newUrl = event.notification.data.clickUrl || '';
function endsWith(str, suffix) {
return str.indexOf(suffix, str.length - suffix.length) !== -1;
}
event.waitUntil(
clients.matchAll({
includeUncontrolled: true,
type: 'window'
})
.then(windowClients => {
for (let i = 0; i < windowClients.length; i++) {
let client = windowClients[i];
if (validUrls.test(client.url) && 'focus' in client) {
if (endsWith(client.url, newUrl)) {
console.log('URL already open, focusing.');
return client.focus();
} else {
console.log('Navigate to URL and focus', client.url, newUrl);
return client.navigate(newUrl).then(client => client.focus());
}
}
}
if (clients.openWindow) {
console.log('Opening new window', newUrl);
return clients.openWindow(newUrl);
}
})
);
});
我的绝大多数软件代码取自:
https://gist.github.com/vibgy/0c5f51a8c5756a5c408da214da5aa7b0
推荐答案
我建议从clients.matchAll()
中删除includeUncontrolled: true
。
WindowClient
可能没有当前服务工作进程作为其活动的服务工作进程。根据the specification for WindowClient.navigate()
中的第4项:
如果上下文对象的关联服务工作者客户端处于活动状态
服务工作者不是上下文对象的相关全局对象
服务人员,返回已拒绝的承诺,并返回TypeError
。
如果在确定客户端当前由服务工作人员控制的情况下可以重现问题,则可能发生了其他情况,但这是我尝试的第一步。
这篇关于ServiceWorker WindowClient.导航承诺被拒绝的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文