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

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

在触发订阅之前，您应该等待服务工作者被激活。

使用 stateChange 监听器来确定 service worker 是否处于活动状态

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

Answer 2

您可以通过检查 Service Worker 状态来解决此问题。仅在服务人员处于活动状态时执行您的操作。

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
}

检查是否支持推送通知

 // 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) {  .... })

希望对你有帮助