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.
