CODEWITHSUNDEEP
firebase-cloud-messagingangular7
Thomas Kim
Thomas Kim

Reputation: 31

Angular 7 cannot receive firebase notification in the foreground

I am setting my website to receive firebase notifications. I can receive it when in the background. But could not when in the foreground. I have followed this tutorial link to set up. https://medium.com/@a.adendrata/push-notifications-with-angular-6-firebase-cloud-massaging-dbfb5fbc0eeb.

I have initialize it in app.module.ts.

I have tried others similar stackoverflow solutions. But none of them is working so far.

I have tried to use AngularFireMessaging, and FirebaseApp. But both of them could not receive notification after sent.

import { FirebaseApp } from '@angular/fire';
import '@firebase/messaging';
import { AngularFireMessaging } from '@angular/fire/messaging';

  setUpMessage() {
    this.messaging = this.firebaseApp.messaging();
  }

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

  requestPermission() {
    this.afMessaging.requestToken.subscribe(token => {
      console.log(token);
    }, error => {
      console.error(error);
    });
  }

  listenToNotifications() {
    return this.afMessaging.messages;
  }

  listenNotifications() {
    return this.messaging;
  }

In my component.ts file, I initialized them and got the token from firebase. but cannot receive notification in the foreground.

ngOnInit() {
    this.fcmTokenService.setUpMessage();
    this.fcmTokenService.setUpFCM();
    this.fcmTokenService.requestPermission();
    this.validation_messages = this.printFormService.printValidationMessage();
    this.listenNotification();
    this.listenNotification2();
  }

  private listenNotification() {
    this.fcmTokenService.listenToNotifications().subscribe(msg => {
      // msg.content = JSON.parse(msg.data.content);
      console.log(msg);
    });
  }

  private listenNotification2() {
    this.fcmTokenService.listenNotifications().onMessage(msg => {
      console.log(msg);
    });
  }

I expect to receive the notification and console log it, but no result after many hours or retrying with different approaches.

Upvotes: 3

Views: 2775

Answers (4)

Flippy
Flippy

Reputation: 31

On your firebase-messaging-sw.js or your service worker file?

importScripts('https://www.gstatic.com/firebasejs/7.6.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/7.6.0/firebase-messaging.js');

should have the same version with your firebase on package.json

"dependencies": {
...
"firebase": "^7.6.0",
...
}

More details here: https://github.com/angular/angularfire/issues/1904#issuecomment-543506629

Upvotes: 3

user9591065
user9591065

Reputation:

The import scripts version and the library version in node_modules must be same for foreground messaging subscription to get the data!

Upvotes: 1

redrom
redrom

Reputation: 11642

I found that importScripts version in service Worker & version of library in package.json has to be same.

Upvotes: 2

sahan ridma
sahan ridma

Reputation: 1

This is a Version compatibility issue as far as I figured. just try to use "firebase": "^5.0.0", "@angular/fire": "^5.0.0",

override your package.json with these two, run npm install, you will be fine

Upvotes: 0

Related Questions