My app is receiving FCM messaging notifications successfully, but I'm facing an issue when trying to trigger a router navigation. Specifically, I want to display a page that mimics the standard Android incoming call screen when a call notification is received. I have set up a listener for pushNotificationReceived as shown below:
await PushNotifications.addListener('pushNotificationReceived', notification => {
this.logger.info(`[PUSH NOTIFICATION] - Push notification received: [Title: ${notification.title}, Body : ${notification.body}]`);
if (notification.data && notification.data.IncomingCall) {
this.logger.info(`INCOMING CALL FROM ${notification.data.CallerName}`);
this.router.routeReuseStrategy.shouldReuseRoute = () => false;
this.router.onSameUrlNavigation = 'reload';
this.router.navigate(['/incomingcall']);
} else {
this.showNotificationDialog(notification.title || '', notification.body || '');
}
});
However, when this code is executed, the screen does not change as expected. It appears to be somewhat unresponsive, with controls and clicks not functioning properly.
I enabled router debugging and observed that routing is indeed happening, but it seems to stall, as the component's ngInit logging does not display.
Line 1 - Msg: %c2022-03-23T13:43:07.094Z INFO [main.1554ef6f3488783a.js:1:377716] color:gray [PUSH NOTIFICATION] - Push notification received: [Title: Incoming call, Body : undefined]
Line 1 - Msg: %c2022-03-23T13:43:07.095Z INFO [main.1554ef6f3488783a.js:1:377850] color:gray INCOMING CALL FROM Frank
(Router Event logs follow...)
My app.component.html file consists of a router-outlet with the Home.Component serving as the layout, which contains its own router-outlet. Here are my router module configurations:
const routes: Routes = [
{
path: 'incomingcall',
component: IncomingCallComponent
},
{
path: '',
component: HomeComponent,
children: [
(Other route configurations...)
Upon inspecting the router-outlet tags in each component, I noticed that although the new page is almost rendering correctly within the app.component router outlet, the page within the home.component router-outlet continues to show simultaneously. It appears as below:
<Appcomponent-router-outlet>
<HomeComponent-router-outlet>
<Contacts Page>
</HomeComponent-router-outlet>
<IncomingCall Page>
</Appcomponent-router-outlet>
I attempted to replicate this behavior on StackBlitz, but I was unsuccessful in doing so. I suspect this may be due to the limitations of reproducing the PushNotification.addListener method accurately. For reference, you can view the StackBlitz project here.