Safari and Chrome in IOS does not listen to server sent events when the browser is in the background

I’m trying to redirect my Angular web application to a different URL that receives from server-sent events. This feature works well when the browser is in the foreground in IOS. However, when a user changes the browser to the background, the Angular application does not listen to any events.

This issue only happens in IOS. In Andriod, browsers receive server-sent events even when the browser is in the background.

service.ts

getServerSentEvent(merchantTransactionId: string, txnDate: string): Observable<any> {
    return new Observable<string>(obs => {
      const appType = 'guest-checkout';
      const url = environment.BASE_DATA_URL + '/api/event/server-sent/event/subscribe/' + appType + '/' + merchantTransactionId;
      const es = new EventSource(url);
      es.addEventListener('message', (event) => {
          // alert(event.data);
          obs.next(event.data);
      });
      return () => es.close();
    });
  }

I have added an alert box to test whether it appears on mobile or not. It does not appear when the browser is in the background. Also, I have tried onmessage instead of addEventListener and there was no change.

Component.ts

triggerSSEEvent(merchantTxnId, txnDateString): void {
    this.sseService.getServerSentEvent(merchantTxnId, txnDateString).subscribe(
      (data) => {
        const response = JSON.parse(data);
        this.responseURL = response.url;
        window.location.href = response.url;
      },
      (error) => {
        this.showError();
      }
    );
  }

Note: The user usually switches the browser in order to accept the push request from another app.