Not receiving FCM messages

[BradyShober]

I have tried following the documentation in order to set up browser notifications for the application my team is currently developing. While I am able to obtain an FCM registration token, when I try to send a notification it does not appear to be received by the application. We are using the default firebase-messaging-sw.js

Version info

Ionic 3.9.2
Angular 5.2.10
Firebase ^5.5.1
AngularFire ^5.0.2

Browsers tested: Chrome 69.0.3497.100, Firefox 63.0b10

How to reproduce these conditions

Create a new Ionic project and install required packages.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { FcmProvider } from '../providers/fcm/fcm';
import { NotificationProvider } from '../providers/fcm/notifications';

import * as firebase from 'firebase';

import { AngularFireModule } from '@angular/fire';

import { AngularFireMessagingModule } from '@angular/fire/messaging';


const config = {
  //Firebase configuration information
}; 

firebase.initializeApp(config);

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    AngularFireModule.initializeApp(config),
    AngularFireMessagingModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    FcmProvider,
    NotificationProvider
  ]
})
export class AppModule {}

fcm.ts provider

import { Injectable } from '@angular/core';
import { AngularFireMessaging } from '@angular/fire/messaging';
import { Platform } from 'ionic-angular';
import { mergeMapTo } from 'rxjs/operators';
import { Observable } from 'rxjs-compat';


@Injectable()
export class FcmProvider {


  constructor(private platform: Platform, private afMessaging: AngularFireMessaging) {

  }

  requestPermission(){
    return this.afMessaging.requestPermission.pipe(mergeMapTo(this.afMessaging.tokenChanges));
  }

  listen(){
    console.log("listening for messages");
    return this.afMessaging.messages;
  }

}

notification.ts provider

import { Injectable } from '@angular/core';
import { FcmProvider } from './fcm';
import { Platform } from 'ionic-angular';
import { AlertController } from 'ionic-angular';

@Injectable()
export class NotificationProvider {

    constructor(private platform: Platform, private fcm: FcmProvider, private alertCtrl: AlertController){}

    initializeNotifications(){

        this.fcm.requestPermission()
            .subscribe(token =>{
              console.log(token);
              this.fcm.listen()
                .subscribe(message => {
                console.log(message);
                this.notificationOpen(message);
                });
            });

    }

    notificationOpen(data){
        console.log(JSON.stringify(data));
        var alert;

        alert = this.alertCtrl.create({
            title: 'Request Received',
            message: 'A request has been received, would you like to accept it?',
            buttons: [
                {
                    text: 'Decline',
                    role: 'cancel'
                },
                {
                    text: 'Accept',
                    handler: () => {
                        this.acceptRequest(); 
                    }
                }
            ]
        });
        alert.present();
    }

    acceptRequest(){
        //call provider to accept request
        console.log("Request Accepted");
    }
}

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { NotificationProvider } from '../../providers/fcm/notifications';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  providers: [
    NotificationProvider
  ]
})
export class HomePage {

  constructor(public navCtrl: NavController, private notifications: NotificationProvider) {
    notifications.initializeNotifications();

  }

}

Expected behavior

When a notification is sent we should be seeing a log entry in the console and the notification should open.

Actual behavior

There is no log message and no notification opens.

[kobvel]

@BradyShober any resolution here? I am facing the same issue

[thongnx6]

I have faced the same issue. After that, I tried this code, it works for me.

this.angularFireMessaging.messaging.subscribe((_messaging) => {
        _messaging.onMessage = _messaging.onMessage.bind(_messaging);
        _messaging.onTokenRefresh = _messaging.onTokenRefresh.bind(_messaging);
})

then

/**
 * hook method when new notification received in the foreground
 */
receiveMessage() {
    this.angularFireMessaging.messages.subscribe((payload) => {
        console.log("new message received. ", payload);
        this.currentMessage.next(payload);
    })
}

[fmandres92]

I have the same issue please. How can help me ??

[Shifs]

I am having the same issue . If I try CURL from Postman , it gives success response but does not store in firebase. If I directly create JSON in firebase database , then also I am not getting PUSH notification

[BradyShober]

We have since switched to react-native and are no longer using Angular, but shortly before we switched we realized that the issue we had been experiencing was due to using the firebase console to try to send notifications to web, which does not work, and found when we used the admin sdk we were able to get the notifications. Not sure if that is the same issue for others here having issues getting notifications.

[CodeByBryan]

I have only been using the web client, but have found that the only way that the client will receive messages is if it includes the Notification object. When sending a message with only the Data object it shows it was sent successfully and gives me an ID on return, but the client never receives it. I am hoping to find a solution since I really don't need the Notification functionality. If someone has figured this out, let me know!

[alihalabyah]

Any updates here? Is this project still maintained?

[Thomas0921]

I need help too, I can receive the notification in the background, but the onMessage or messages.subscribe (for foreground) is not triggering when receiving notifications.

[lancelynyrd]

Any solution on this one? i have the save issue, it was working on background but for the foreground it doesnt really being triggered.
no error, no response. but background is working.
this.afMessaging.messages.subscribe((res) => {
console.log(firebase listenMessage::, res);
}, e => console.log(error listenMessage::, e));

[sgallard]

Same for me here, working on background but for the foreground doesn't trigger

[azhararmar]

Same here, the background works and foreground doesn't.

[lancelynyrd]

@azhararmar @sgallard i have fixed my problem by matching the version of importScript inside the firebase-messaging-sw.js and the version of firebase install in package.json

[azhararmar]

@lancelynyrd I fixed the issue by changing the version of importScript from 5.x to 7.x

[khetho]

@lancelynyrd solution worked for me

[link4hy]

@azhararmar U save my ass.