无法订阅用户: DOMException: 订阅失败 - 没有活动的服务辅助角色

Question

我正在尝试从代码实验室谷歌学习，但在实现它时遇到错误。

这是我的代码。

服务工作者注册

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

在此代码片段中，我收到错误

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("无法订阅用户："，错误(;这里我收到错误：无法订阅用户：DOMException：订阅失败 - 没有活动的服务工作线程

Answer 1

如果有人还在想...使用 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 检查/应用程序/服务作品中取消选中从网络绕过为我工作！