Angular swPush.requestSubscription 在第一次调用时没有返回任何内容答案

【问题标题】：Angular swPush.requestSubscription is not returning anything on First CallAngular swPush.requestSubscription 在第一次调用时没有返回任何内容
【发布时间】：2020-05-15 21:53:40
【问题描述】：

我在我的 Angular 项目中使用 swPush。其中，this.swPush.requestSubscription() 的事件是通过单击按钮来调用的。

例如：

这个getdeviceToken 会打电话

getDeviceToken(): Promise<any> {
        console.log('getting device token')
        return new Promise(async (resolve, reject) => {
                if (this.swPush.isEnabled) {
                    console.log('before subscription')
                    let sub = await this.swPush.requestSubscription({
                        serverPublicKey: this.VAPID_PUBLIC_KEY
                    })
                    console.log('temp --------', sub)
                    if(sub) {
                        this.device_token = sub;
                        if(sub) {
                            console.log('if sub')
                            resolve(this.device_token);
                        }else{
                            console.log('else sub')
                            reject({ message: "Error getting device id"});
                        }
                    } else{
                        reject({ message: "Error getting device id"});
                    }
                } else{
                    console.log('sw is not enabled');
                    reject({ message: "Error getting device id"});
                }
    }

硬重新加载后，当我第一次单击按钮时，它卡在了
console.log('before subscription')

并且什么也不返回。它使我的应用程序无法使用，因为该函数没有返回任何内容，甚至没有返回错误。所以我无法前进。

但是，当我进行简单的重新加载并再次单击该按钮时，它可以工作，this.swPush.requestSubscription() 向我返回了一个承诺，因此我的应用程序正在向前发展。任何人都知道为什么它第一次不起作用？或者有任何改进的建议。

【问题讨论】：

这也发生在我身上。清理缓存和硬重新加载有效，但一段时间后它也停止工作

标签： angular push-notification service-worker angular-service-worker react-native-push-notification

【解决方案1】：

我得到了这个解决方案，IDK 是如何工作的，但它每次都有效......

在页面中将推送通知权限设置为询问（默认）
使用Notification.requestPermission().then( result => { getSubscriptionData(); }); 请求用户许可
避免使用 chrome，因为它会检查安全性，来自除 https:// 之外的任何服务器的数据都会被阻止。改用更新的 EDGE 或 firefox

如果您有任何其他解决方案，请注释掉...这是我的完整代码：

constructor(private _floatNotifications: FloatNotificationService,
    private readonly _swPush: SwPush,
    private _apiService: APIservice) { }

  ngOnInit(): void {
    this.getSubscription();
  }

  getSubscription() {
    console.log(Notification.permission);
    if(Notification.permission === 'default') {
      Notification.requestPermission().then(() => {
        this.requestSubscription();
      }).catch(() => {
        // show permission denied error
      });
    }
    else if(Notification.permission === 'denied') {
      // show permission is denied, please allow it error
    } else {
      this.requestSubscription();
    }
  }

  async requestSubscription() {
    try {
      const sub = await this._swPush.requestSubscription({ serverPublicKey: ServiceKeysEnum.PUSH_SUBSCRIPTION_PUBLIC_KEY });
      console.log("subscription object ", sub);
    } catch  (e) {
      this._floatNotifications.makeToast.next({header: "Task failed", text: "failed to get subscription object"+e, DurationsEnum: DurationsEnum.MEDIUM, type: "danger"});
    }
  }

【讨论】：