未知の（約束された）DOMException：サブスクリプションが失敗しました - アクティブなサービスワーカーがありません

Question

私はユーザを購読しようとしていますが、これは初めてのエラーです。ユーザがすでに

アクティブになっているので、それが働いている 二回目は、これは私のコードです：

if ('serviceWorker' in navigator) { 
    console.log('Service Worker is supported'); 
    navigator.serviceWorker.register('sw.js').then(function(reg) { 
    console.log(':^)', reg); 
    reg.pushManager.subscribe({ 
     userVisibleOnly: true 
    }).then(function(sub) { 
     console.log('endpoint:', sub.endpoint); 
     var div = document.getElementById('id'); 
     div.innerHTML = div.innerHTML + sub.endpoint; 
     // var b = document.getElementsByTagName('body')[0]; 
     //b.appendChild(div); 
     //alert(sub.endpoint); 
    }); 
    }); 
} 

私はすでに次のことを試してみましたが、ready.then()方法は起きていない。

if ('serviceWorker' in navigator) { 
    console.log('Service Worker is supported'); 
    navigator.serviceWorker.register('sw.js').then(function(sreg) { 
    console.log(':^)', sreg); 
    navigator.serviceWorker.ready.then(function(reg) { 
     reg.pushManager.subscribe({ 
     userVisibleOnly: true 
     }).then(function(sub) { 
     console.log('endpoint:', sub.endpoint); 
     var div = document.getElementById('id'); 
     div.innerHTML = div.innerHTML + sub.endpoint; 
     // var b = document.getElementsByTagName('body')[0]; 
     //b.appendChild(div); 
     //alert(sub.endpoint); 
     }); 
    }); 
    }); 
} 

を

アイデア？

Answer 1

サービスワーカーのステータスを確認することでこれを解決できます。サービスワーカーがアクティブな場合にのみアクションを実行します。 pushnotificationため

navigator.serviceWorker.register('sw.js').then(function(reg) { 
if(reg.installing) { 
     console.log('Service worker installing'); 
    } else if(reg.waiting) { 
     console.log('Service worker installed'); 
    } else if(reg.active) { 
     console.log('Service worker active'); 
    } 
// Include below mentioned validations 
} 

チェックはサポートされ、またはこれら2つのチェックはあなたに機能を実装した後

// Check if push messaging is supported 
    if (!('PushManager' in window)) { 
     console.log('Push messaging isn\'t supported.'); 
     return; 
    } 
    // 
    if (Notification.permission === 'denied') { 
     console.log('The user has blocked notifications.'); 
     return; 
    } 

を使用していません。

navigator.serviceWorker.ready.then(function(reg) { .... }) 

ホープこれはあなたがサービスワーカーを待つべき

Answer 2

は、サブスクリプションをトリガする前にアクティブにするのに役立ちます。サービスワーカーが

navigator.serviceWorker.register(workerFileName, {scope: "/"}) 
    .then(
    function (reg) { 
     var serviceWorker; 
     if (reg.installing) { 
      serviceWorker = reg.installing; 
      // console.log('Service worker installing'); 
     } else if (reg.waiting) { 
      serviceWorker = reg.waiting; 
      // console.log('Service worker installed & waiting'); 
     } else if (reg.active) { 
      serviceWorker = reg.active; 
      // console.log('Service worker active'); 
     } 

     if (serviceWorker) { 
      console.log("sw current state", serviceWorker.state); 
      if (serviceWorker.state == "activated") { 
       //If push subscription wasnt done yet have to do here 
       console.log("sw already activated - Do watever needed here"); 
      } 
      serviceWorker.addEventListener("statechange", function(e) { 
       console.log("sw statechange : ", e.target.state); 
       if (e.target.state == "activated") { 
        // use pushManger for subscribing here. 
        console.log("Just now activated. now we can subscribe for push notification") 
        subscribeForPushNotification(reg); 
       } 
      }); 
     } 
    }, 
    function (err) { 
     console.error('unsuccessful registration with ', workerFileName, err); 
    } 
);