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

Posted 2023-03-31

【中文标题】Uncaught (in promise) DOMException: Subscription failed - no active Service Worker

【英文标题】：

【发布时间】：2016-09-21 19:08:49

【问题描述】：

我正在尝试订阅用户，但这是我第一次遇到的错误。 第二次，它正在工作，因为用户已经处于活动状态

这是我的代码：

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

有什么想法吗？

【参考方案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);
    
);

【参考方案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)   .... )

希望对你有帮助

【讨论】：

但它仍然没有注册用户，这是我的问题

是这个console.log(':^)', reg);打印出来？

你能检查一下没有推送管理器的代码是否工作正常吗？

只需注释掉 reg.pushManager.subscribe( 代码并检查它是否工作正常？

尝试为 serviceWorker.register 方法设置范围。检查我的代码@github.com/bandhavya/bandhavya.github.io 我没有包含 pushManager。