当应用程序处于前台时，Angular 8 Firebase推送通知不起作用 [英] Angular 8 firebase push notification is not working when application is in foreground

问题描述

我正在关注本文档，以便在Angular Web应用程序上实施FCM.当我发送通知时，当应用程序处于非活动状态时，它将成功接收.(接收后台通知).但是，如果该应用程序处于活动状态，则不会收到通知.

I'm following this document to implement the FCM on my Angular web application. When I send the notification it receives successfully when the application is not active. ( Recieve background notifications ). But if the application is active, I'm not getting the notification.

执行以下步骤: https://dev.到/mayurkadampro/angular-8-firebase-cloud-messaging-push-notifications-97a

基本上，这不会在收到新消息时触发

basically this is not triggering when there is a new message

this.angularFireMessaging.messages.subscribe(
(payload) => {
    console.log("new message received. ", payload);
    this.currentMessage.next(payload);})

我想念什么?

推荐答案

您需要手动触发它.

收到消息后，您只需对其进行记录，然后将消息转到下一个消息:

When you receive you only logging it, and let the message go to the next one:

this.angularFireMessaging.messages.subscribe(
(payload) => {
    console.log("new message received. ", payload);
    this.currentMessage.next(payload);})

您需要触发服务人员的通知:

You need to trigger the notification from service worker:

this.angularFireMessaging.messages.subscribe(
(payload) => {
    console.log("new message received. ", payload);
    const NotificationOptions = {
            body: payload.notification.body,
            data: payload.data,
            icon: payload.notification.icon
          }
          navigator.serviceWorker.getRegistration('/firebase-cloud-messaging-push-scope').then(registration => {
            registration.showNotification(payload.notification.title, NotificationOptions);
          });
    this.currentMessage.next(payload);})

然后添加firebase-messaging-sw.js:

Then add in firebase-messaging-sw.js:

self.addEventListener('notificationclick', function(event) {
    event.notification.close();
    event.waitUntil(self.clients.openWindow(event.notification.data.url));
});

这篇关于当应用程序处于前台时，Angular 8 Firebase推送通知不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！