ServiceWorkerがサブスクライブする前に登録を完了するまで待ちます。

Question

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

、これはとfailes：上の第二の訪問から

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

、 ServiceWorkerがその時点ですでにアクティブであるため、すべてがOKです。これはタイミングの問題のように見えます。 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()内部の一部が呼び出されることはありません。

Answer 1

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