未捕獲（承諾）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

您可以通過檢查服務工作人員狀態來解決此問題。僅當服務人員處於活動狀態時才執行您的操作。

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 
} 

檢查pushnotification被支持或不使用

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