Angular中swPush.requestSubscription首次调用无返回问题求助

这个问题我之前也碰到过，结合你的代码和场景，主要有几个核心原因，对应的改进方案也很明确：

一、核心原因分析 #

1. Service Worker未完全激活就发起请求 #

硬刷新（Ctrl+F5）会强制浏览器重新下载并安装Service Worker，此时swPush.isEnabled可能提前返回true，但Service Worker实际上还处于安装/激活阶段，并没有完全准备好处理订阅请求。这就导致requestSubscription()调用后，浏览器内部处于等待状态，既不返回结果也不抛出错误。

而普通刷新时，Service Worker已经完成激活流程，所以请求能正常执行。

2. 代码结构导致异常无法捕获 #

你用new Promise嵌套了async/await逻辑，这种写法会让requestSubscription()抛出的异常（比如用户拒绝权限、VAPID密钥错误）无法被正确捕获，导致Promise一直处于pending状态，看起来像是“卡住”了。

3. 浏览器权限请求被阻塞或未处理 #

硬刷新后，浏览器的通知权限弹窗可能被拦截（比如用户之前关闭过弹窗，或者浏览器默认拦截），此时requestSubscription()会一直等待用户的权限响应，但用户看不到弹窗，自然也就没有后续动作。

二、改进方案 #

1. 重构代码，优化错误处理 #

首先去掉多余的new Promise嵌套，直接用async/await配合try/catch，确保所有异常都能被捕获并处理：

async getDeviceToken(): Promise<PushSubscription> {
  console.log('getting device token');

  // 先检查Service Worker状态
  if (!this.swPush.isEnabled) {
    console.log('sw is not enabled');
    throw new Error("Error getting device id");
  }

  // 先确认通知权限
  const permission = await Notification.requestPermission();
  if (permission !== 'granted') {
    throw new Error('Notification permission is required to get device token');
  }

  console.log('before subscription');
  try {
    const sub = await this.swPush.requestSubscription({
      serverPublicKey: this.VAPID_PUBLIC_KEY
    });
    console.log('temp --------', sub);
    
    if (!sub) {
      throw new Error("Failed to get subscription");
    }
    
    this.device_token = sub;
    return this.device_token;
  } catch (error) {
    console.error('Subscription request failed:', error);
    throw new Error("Error getting device id");
  }
}

2. 等待Service Worker完全激活后再发起请求 #

添加Service Worker激活状态的监听，确保它完全就绪后才允许用户点击按钮：

// 在组件类中添加状态标记
private swFullyActivated = false;

ngOnInit(): void {
  // 监听Service Worker激活事件
  navigator.serviceWorker.addEventListener('controllerchange', () => {
    this.swFullyActivated = true;
  });

  // 初始化时检查现有激活状态
  navigator.serviceWorker.getRegistration().then(reg => {
    if (reg?.active) {
      this.swFullyActivated = true;
    }
  });
}

// 按钮点击事件处理
async onRequestTokenClick(): Promise<void> {
  if (!this.swFullyActivated) {
    alert('Service Worker正在初始化，请稍后再试');
    return;
  }

  try {
    const token = await this.getDeviceToken();
    // 处理获取到的token
    console.log('Got device token:', token);
  } catch (err) {
    alert(err.message);
  }
}

3. 主动处理权限状态 #

提前检查通知权限状态，避免因为权限问题卡住请求：

• 如果权限是denied，直接提示用户去浏览器设置中开启权限；
• 如果是default，再发起权限请求和订阅。

三、额外检查点 #

• 确认你的VAPID公钥是正确的base64格式，没有多余的空格或换行；
• 检查浏览器控制台的Application > Service Workers面板，看硬刷新后Service Worker的状态是否正常（是否显示activated）；
• 确保你的Service Worker文件没有语法错误，否则会激活失败。

内容的提问来源于stack exchange，提问作者VinoPravin