capacitor-community / capacitor-community/fcm
Double notification when application is open with Capacitor 4 and FCM 3.0.0
- Dominant language
- TypeScript
- Stars
- 272
- Forks
- 96
- PR merge metrics
- No merged PRs in 30d
Description
Since I switched to Capacitor 4 and updated capacitor/community/fcm to 3.0.0, if I have the application open and receive a notification in addition to receiving the notification in the form of a toast as I have set up I now also receive the notification at the top of the status bar.
I might even like this if I decide to remove the toast but the problem is that if I click on the notification at the top nothing happens, unlike if I receive it from an open app which makes the app open and navigate me to the correct page.
This problem occurs on both Android all versions and IOS.
My code is as follows:
```
private registerPush() {
PushNotifications.requestPermissions().then((permission) => {
// MY CODE ....
});
PushNotifications.addListener(
'registration',
(token: Token) => {
// MY CODE ....
}
);
PushNotifications.addListener('registrationError', () => {
});
// If I want to show an Alert on the page if the app is open
PushNotifications.addListener('pushNotificationReceived',
(notification: PushNotificationSchema) => {
if (notification && notification.data && UTILITY.checkText(notification.data.typeToOpen)) {
const dataNotification: IDataNotification = notification.data;
if (dataNotification.isComment) {
this.presentToastNotificationCommento(
'un\'offerta', dataNotification.idToOpen, dataNotification.typeToOpen);
} else if (UTILITY.checkText(dataNotification.link) && dataNotification.link === LABEL.FAVORITES_LIST) {
this.presentToastNotificationFavoritesList();
} else {
this.presentToastNotification(dataNotification.typeToOpen);
}
}
}
);
// When clicking on a notification
PushNotifications.addListener(
'pushNotificationActionPerformed',
async (notification: ActionPerformed) => {
try {
this.openFromNotification = true;
this.platform.ready().then(() => {
if (notification.notification && notification.notification.data &&
UTILITY.checkText(notification.notification.data.typeToOpen)) {
const dataNotification: IDataNotification = notification.notification.data;
switch (dataNotification.typeToOpen) {
case LABEL.DEAL_DETAIL:
this.getAllDeals().subscribe((deals) => {
this.dealsList.next(deals);
this.getAllInEvidences().subscribe(inEvidenceList => {
this.inEvidenceList.next([...inEvidenceList]);
});
this.getAllNotifications().subscribe(notificationsList => {
this.notificationsList.next(notificationsList);
},
error => {
this.errorOpenApp(105, error);
});
setTimeout(() => {
if (UTILITY.checkText(dataNotification.idToOpen)) {
this.router.navigate(['/deal-detail', dataNotification.idToOpen]);
} else {
this.router.navigate(['/home/deals-list'])
.then(() => this.tabSelected.next('deals-list'));
}
setTimeout(() => {
this.openFromNotification = false;
}, 300);
}, 100);
},
error => {
this.errorOpenApp(106, error);
});
break;
case LABEL.COMMUNICATION_DETAIL:
this.blogService.getAllCommunications().subscribe(list => {
this.blogService.communicationsList.next(list);
this.getAllInEvidences().subscribe(inEvidenceList => {
this.inEvidenceList.next([...inEvidenceList]);
});
this.getAllNotifications().subscribe(notificationsList => {
this.notificationsList.next(notificationsList);
}, error => {
this.errorOpenApp(107, error);
});
setTimeout(() => {
if (UTILITY.checkText(dataNotification.idToOpen)) {
this.router.navigate(['/post-blog-detail', LABEL.COMMUNICATION_DETAIL,
dataNotification.idToOpen]);
} else {
this.router.navigate(['/home/blog']).then(() => this.tabSelected.next('blog'));
}
setTimeout(() => {
this.openFromNotification = false;
}, 300);
}, 100);
},
error => {
this.errorOpenApp(108, error);
});
break;
case LABEL.PROMOTION_DETAIL:
this.blogService.getAllPromotions().subscribe(list => {
this.blogService.promotionsList.next(list);
this.getAllInEvidences().subscribe(inEvidenceList => {
this.inEvidenceList.next([...inEvidenceList]);
});
this.getAllNotifications().subscribe(notificationsList => {
this.notificationsList.next(notificationsList);
},
error => {
this.errorOpenApp(109, error);
});
setTimeout(() => {
if (UTILITY.checkText(dataNotification.idToOpen)) {
this.router.navigate(['/post-blog-detail', LABEL.PROMOTION_DETAIL,
dataNotification.idToOpen]);
} else {
this.router.navigate(['/home/blog']).then(() => this.tabSelected.next('blog'));
}
setTimeout(() => {
this.openFromNotification = false;
}, 300);
}, 100);
},
error => {
this.errorOpenApp(110, error);
});
break;
case LABEL.NEWSPAPER_DETAIL:
this.blogService.getAllNewspapers().subscribe(list => {
this.blogService.newspapersList.next(list);
this.getAllInEvidences().subscribe(inEvidenceList => {
this.inEvidenceList.next([...inEvidenceList]);
});
this.getAllNotifications().subscribe(notificationsList => {
this.notificationsList.next(notificationsList);
},
error => {
this.errorOpenApp(111, error);
});
setTimeout(() => {
if (UTILITY.checkText(dataNotification.idToOpen)) {
this.router.navigate(['/post-blog-detail', LABEL.NEWSPAPER_DETAIL,
dataNotification.idToOpen]);
} else {
this.router.navigate(['/home/blog']).then(() => this.tabSelected.next('blog'));
}
setTimeout(() => {
this.openFromNotification = false;
}, 300);
}, 100);
},
error => {
this.errorOpenApp(112, error);
});
break;
case LABEL.TUTORIAL_DETAIL:
this.blogService.getAllTutorials().subscribe(list => {
this.blogService.tutorialsList.next(list);
this.getAllInEvidences().subscribe(inEvidenceList => {
this.inEvidenceList.next([...inEvidenceList]);
});
this.getAllNotifications().subscribe(notificationsList => {
this.notificationsList.next(notificationsList);
},
error => {
this.errorOpenApp(113, error);
});
setTimeout(() => {
if (UTILITY.checkText(dataNotification.idToOpen)) {
this.router.navigate(['/post-blog-detail', LABEL.TUTORIAL_DETAIL,
dataNotification.idToOpen]);
} else {
this.router.navigate(['/home/blog']).then(() => this.tabSelected.next('blog'));
}
setTimeout(() => {
this.openFromNotification = false;
}, 300);
}, 100);
},
error => {
this.errorOpenApp(114, error);
});
break;
default:
this.simpleOpenApp();
}
} else {
this.simpleOpenApp();
}
});
} catch (e) {
await this.simpleOpenApp();
}
}
);
}
```
Contributor guide
Research direction
Start with the provided registerPush code and its pushNotificationReceived and pushNotificationActionPerformed listeners, then reproduce the behavior on Android and iOS with Capacitor 4 and FCM 3.0.0. Done means an open application does not produce an unintended status-bar notification, or that notification activates the expected navigation when selected.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- android, firebase, ios, typescript
- Domain
- mobile-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100