I’m trying to add push notifications to my Angular app, and I have successfully implemented it for Chrome, Firefox, and Edge. However, I’m facing issues with Safari on both iPhones and MacBooks.

Environment:

• Angular Version: 17
• Service Worker Library: @angular/service-worker using swPush
• Safari Versions:
  MacBook: v17.3 (tested on BrowserStack)
  iPhone: v17

Issue:
MacBook Safari:
I get the following error in service worker web inspector not the console:
Push event ended without showing any notification may trigger removal of the push subscription.

iPhone Safari:
When I try to subscribe to push notifications, I get this error:

Push notifications not supported in this browser

though I registered the service worker in app.module.ts imports:

ServiceWorkerModule.register('ngsw-worker.js', {enabled:true})

Code:
Here’s my code in the app component:

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

Notes:

• The action I dispatch is for a backend API that my coworker created.
• This issue only occurs on Safari browsers (MacBook and iPhone). On Chrome, Firefox, and Edge, everything works as expected.

Question:
Has anyone faced similar issues with push notifications in Safari? What might be causing these errors, and how can I resolve them?