ServiceWorker'ın abone olmasından önce kayıt işlemini tamamlamasını bekleyin

Question

Kullanıcı bildirimlerini uygulamak için ServiceWorker kullanıyorum. Kullanıcı ilk bildirim siteyi ziyaret ve onayladığında, ServiceWorker'ın kayıtlı ve abone: ilk ziyaretimde

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

, bununla bozulana: ikinci ziyaret itibaren

Uncaught (in promise) DOMException: Subscription failed - no active Service Worker 

, Her şey yolunda, çünkü ServiceWorker o anda aktif durumda. Bu bir zamanlama sorunu gibi görünüyor. ServiceWorker'ın başarıyla kaydedildiğinden ve ona abone olmaya çalışmadan önce etkin olduğundan nasıl emin olabilirim?

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

Şimdi navigator.serviceWorker.ready.then() iç kısım asla denir: Aşağıda önerildiği gibi

Ben navigator.serviceWorker.ready kullanarak çalıştı.

Answer 1

ServiceWorkerContainer.ready'u kullanabilirsiniz. MDN den

Örnek:

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