Angular 17推送通知在Safari（Mac/iPhone）的兼容问题求助

环境信息 #

• Angular版本：17
• Service Worker库：使用@angular/service-worker的swPush
• Safari版本：
  • MacBook：v17.3（通过BrowserStack测试）
  • iPhone：v17

问题详情 #

MacBook Safari #

在Service Worker检查器中（而非控制台）出现以下错误：
Push event ended without showing any notification may trigger removal of the push subscription.

iPhone Safari #

尝试订阅推送通知时，收到错误提示：
Push notifications not supported in this browser
尽管已在app.module.ts的imports中注册Service Worker：
ServiceWorkerModule.register('ngsw-worker.js', {enabled:true})

代码示例 #

应用组件中的代码如下：

ngOnInit() {
  this.swPush.messages.subscribe((message: any) => {
    this.showNotification(message);
  });

  if (
    navigator.userAgent.indexOf('Safari') !== -1 &&
    navigator.userAgent.indexOf('Chrome') === -1
  ) {
    document.addEventListener('click', this.triggerPushNotifications);
  } else {
    this.pushNotifications();
  }
}

pushNotifications() {
  if (!('Notification' in window)) {
    console.warn('Push notifications not supported in this browser');
    return;
  }

  Notification.requestPermission()
    .then((permission) => {
      if (permission === 'granted') {
        this.swPush
          .requestSubscription({ serverPublicKey: this.publicKey })
          .then((subscription) => {
            this.store.dispatch(new PushNotifications(subscription));
            this.swPush.messages.subscribe((message: any) => {
              this.showNotification(message);
            });
          })
          .catch((err) => {
            document.removeEventListener(
              'click',
              this.triggerPushNotifications
            );
            console.error('Subscription failed:', err);
          });
      } else {
        console.warn('User denied permission for push notifications');
      }
    })
    .catch((err) => {
      console.error('Error requesting notification permission:', err);
    });
}

showNotification(data: any) {
  const URL = this.generateURL(data?.source_id, data?.source_type);
  const options = {
    body: data?.message || 'You have a new notification',
    icon: 'assets/images/oolaLogo.svg',
    data: {
      url: URL,
    },
  };

  navigator.serviceWorker
    .getRegistration()
    .then((registration) => {
      if (registration) {
        if (Notification.permission === 'granted') {
          registration.showNotification(data?.title || 'Notification', options);
          this.handleNotificationClicks();
        } else {
          console.error('Notification permission not granted.');
        }
      } else {
        console.error('Service Worker registration not found.');
      }
    })
    .catch((error) => {
      console.error('Error fetching service worker registration:', error);
    });
}

handleNotificationClicks() {
  this.swPush.notificationClicks.subscribe(({ action, notification }) => {
    if (notification.data && notification.data.url) {
      window.open(notification.data.url, '_blank');
    }
  });
}

补充说明 #

• 代码中分发的action用于调用同事开发的后端API。
• 问题仅出现在Safari浏览器，Chrome、Firefox和Edge功能正常。

求助问题 #

是否有开发者遇到过类似的Safari推送通知问题？这些错误的成因是什么，该如何解决？

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