Uncaught (in Versprechen) DOMException: Abonnement fehlgeschlagen - kein aktiver Service Worker

Question

Ich versuche, den Benutzer zu abonnieren, aber das ist der Fehler, den ich das erste Mal bekomme. Das zweite Mal, es funktioniert, weil der Benutzer bereits aktiv ist

Das ist mein Code:

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

Ich habe versucht, die folgenden schon, aber die ready.then() Methode ist nicht passiert:

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

Irgendwelche Ideen?

Answer 1

Sie können dies beheben, indem Sie nach dem Status des Service-Arbeiters suchen. Führen Sie Ihre Aktionen nur aus, wenn der Service-Mitarbeiter aktiv ist.

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 
} 

prüfen pushnotification unterstützt wird oder nicht

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

Verwendung Nachdem diese beiden Schecks Sie Funktionalität implementieren.

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

this helps

Answer 2

Sie für den Servicemitarbeiter warten soll, bevor das Auslösen des Abonnements aktiviert werden.

Verwendung state Zuhörer um herauszufinden, ob Servicemitarbeiter aktiv ist

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