无法订阅用户：DOMException：订阅失败 - 没有活动的 Service Worker

Question

I am trying to learn from code lab google but I got an error while implementing it.

here is my code.

Registration of service worker

 if ('serviceWorker' in navigator && 'PushManager' in window) {
  console.log('Service Worker and Push is supported');

  navigator.serviceWorker.register('sw.js')
  .then(function(swReg) {
    console.log('Service Worker is registered', swReg);

    swRegistration = swReg;
  })
  .catch(function(error) {
    console.error('Service Worker Error', error);
  });
} else {
  console.warn('Push messaging is not supported');
  pushButton.textContent = 'Push Not Supported';
}

in this code snippet I got error

function subscribeUser() {
  const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey);
  swRegistration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: applicationServerKey
  })
  .then(function(subscription) {
    console.log('User is subscribed.');

    updateSubscriptionOnServer(subscription);

    isSubscribed = true;

    updateBtn();
  })
  .catch(function(err) {
    console.log('Failed to subscribe the user: ', err);
    updateBtn();
  });
}

console.log('Failed to subscribe the user: ', err); here I got error : Failed to subscribe the user: DOMException: Subscription failed - no active Service Worker

Answer 1

If anyone is still wondering... using async/await:

  // Registering Service Worker
  const serviceWorkerRegistration = await navigator.serviceWorker.register('./sw.js', { scope:'./' })
  .catch((err) => { return console.log('[Service Worker] Registration Error:', err) })
  console.log('[Service Worker] Registered. Scope:', serviceWorkerRegistration.scope)

  await navigator.serviceWorker.ready; // Here's the waiting

  // Registering push
  const subscription = await serviceWorkerRegistration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: urlBase64ToUint8Array(publicVapidKey)
  })
  .catch((err) => { return console.log('[Web Push] Registration Error:', err) });
  console.log('[Web Push] Registered');

Answer 2

在 Chrome Inspect / Application / Service Works 中取消选中绕过网络为我工作！