title: Angular fire Messaging Not able to recieve Notificaation, How Can I Fix this?
body: <p>I'm not able to receive the notification Please help me to solve the problem.
  If anyone knows the better solution for the firebase web notification in the ionic / angular web app please help me.</p>
  
  <p>FcmService.ts</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { AngularFireMessaging } from '@angular/fire/messaging';
  import { AngularFireFunctions } from '@angular/fire/functions';
  import { ToastController } from '@ionic/angular';
  import { tap } from 'rxjs/operators';
  
  // Import firebase to fix temporary bug in AngularFire
  import * as app from 'firebase';
  import { Observable, BehaviorSubject } from 'rxjs';
  import { AngularFirestore } from '@angular/fire/firestore';
  
  
  @Injectable({
    providedIn: 'root'
  })
  export class FcmService {
    token;
  
    currentMessage = new BehaviorSubject(null);
    messages$:Observable&lt;any&gt;;
  
    constructor(
      private db:AngularFirestore,
      private afMessaging: AngularFireMessaging,
      private fun: AngularFireFunctions,
      private toastController: ToastController
    ) {
  
      this.afMessaging.messaging.subscribe(
        (_messaging) =&gt; {
          _messaging.onMessage = _messaging.onMessage.bind(_messaging);
          _messaging.onTokenRefresh = _messaging.onTokenRefresh.bind(_messaging);
        }
      )
  
    }
  
  
    getPermission() {
      this.afMessaging.requestToken
        .subscribe(
          (token) =&gt; { 
            this.token = token
  
            console.log('Permission granted! Save to the server!', token); },
          (error) =&gt; { console.error(error); },  
        );
    }
  
  
  
  
    sub(topic) {
      this.fun
        .httpsCallable('subscribeToTopic')({ topic, token: this.token })
        .pipe(tap(_ =&gt; this.makeToast(`subscribed to ${topic}`)))
        .subscribe();
    }
  
    unsub(topic) {
      this.fun
        .httpsCallable('unsubscribeFromTopic')({ topic, token: this.token })
        .pipe(tap(_ =&gt; this.makeToast(`unsubscribed from ${topic}`)))
        .subscribe();
    }
  
    async makeToast(message) {
      const toast = await this.toastController.create({
        message,
        duration: 5000,
        position: 'top',
        showCloseButton: true,
        closeButtonText: 'dismiss'
      });
      toast.present();
    }
  
  
    updateData(data){
      this.db.collection('discont').add(data)
    }
  
  
    receiveMessage() {
      this.afMessaging.messages.subscribe(
        (payload) =&gt; {
          console.log("new message received. ", payload);
          this.currentMessage.next(payload);
        })
    }
  
      enter code here**strong text**
  
  }
  </code></pre>
  
  <p>this is the page where I called the fcmService</p>
  
  <p>home.ts</p>
  
  <pre><code>   import { FcmService } from '../services/fcm.service';
  
           constructor(
      private fcm: FcmService,
      ){}
  
       ngOnInit(){
            this.fcm.receiveMessage()
            this.messageData = this.fcm.currentMessage
      }
  </code></pre>
  
  <p>I have Imported this file to the 'src' directory
  firebase-messaging-sw.js</p>
  
  <pre><code>importScripts('https://www.gstatic.com/firebasejs/7.5.0/firebase-app.js');
  importScripts('https://www.gstatic.com/firebasejs/7.5.0/firebase-messaging.js');
  
  firebase.initializeApp({
      'messagingSenderId': '884242388518'
  });
  
  const messaging = firebase.messaging();
  </code></pre>
  
  <p>angular.json</p>
  
  <pre><code>"assets": [
  
                "src/firebase-messaging-sw.js",
                {
  
                  "glob": "**/*",
                  "input": "src/assets",
                  "output": "assets"
                }
  ]
  </code></pre>