我正在使用ServiceWorker来实现用户通知。当用户首次访问该站点并批准通知时,ServiceWorker已注册并订阅:
if ('serviceWorker' in navigator) {
console.log('Service Worker is supported');
navigator.serviceWorker.register('/js/sw.js').then(function(reg) {
if(/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())){
reg.pushManager.subscribe({
userVisibleOnly: true
}).then(function(sub) {
console.log('endpoint:', sub.endpoint);
endpoint = sub.endpoint;
fetch(MY_API+encodeURIComponent(endpoint), {
credentials: 'include'
})
});
}
}).catch(function(err) {
console.log(':^(', err);
});
}
在第一次访问时,这会失败:
Uncaught (in promise) DOMException: Subscription failed - no active Service Worker
从第二次访问开始,一切正常,因为ServiceWorker当时已处于活动状态。看起来这是一个时间问题。在尝试订阅之前,如何确保ServiceWorker已成功注册并处于活动状态?
我尝试使用navigator.serviceWorker.ready
,如下所示:
if ('serviceWorker' in navigator) {
console.log('Service Worker is supported');
navigator.serviceWorker.register('/js/sw.js').then(function(sreg) {
console.log(':^)', sreg);
navigator.serviceWorker.ready.then(function(reg) {
if(/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())){
reg.pushManager.subscribe({
userVisibleOnly: true
}).then(function(sub) {
console.log('endpoint:', sub.endpoint);
endpoint = sub.endpoint;
fetch("https://www.wettfreun.de/?page=fetch&s=1&endpoint="+encodeURIComponent(endpoint), {credentials: 'include'})
});
}
});
}).catch(function(err) {
console.log(':^(', err);
});
}
现在永远不会调用navigator.serviceWorker.ready.then()
内的部分。
答案 0 :(得分:5)
您可以使用ServiceWorkerContainer.ready。
来自MDN的示例:
function subscribe() {
var subscribeButton = document.querySelector('.js-subscribe-button');
subscribeButton.disabled = false;
navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
serviceWorkerRegistration.pushManager.subscribe()
.then(function(subscription) {
// The subscription was successful
subscribeButton.disabled = true;
return sendSubscriptionToServer(subscription);
})
.catch(function(error) {
if (Notification.permission === 'denied') {
console.log('Permission for Notifications was denied');
subscribeButton.disabled = true;
} else {
console.log('Unable to subscribe to push.', error);
subscribeButton.disabled = false;
}
});
});
}