Angular fire Messaging 无法接收通知，我该如何解决？

Question

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.

FcmService.ts

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<any>;

  constructor(
    private db:AngularFirestore,
    private afMessaging: AngularFireMessaging,
    private fun: AngularFireFunctions,
    private toastController: ToastController
  ) {

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

  }


  getPermission() {
    this.afMessaging.requestToken
      .subscribe(
        (token) => { 
          this.token = token

          console.log('Permission granted! Save to the server!', token); },
        (error) => { console.error(error); },  
      );
  }




  sub(topic) {
    this.fun
      .httpsCallable('subscribeToTopic')({ topic, token: this.token })
      .pipe(tap(_ => this.makeToast(`subscribed to ${topic}`)))
      .subscribe();
  }

  unsub(topic) {
    this.fun
      .httpsCallable('unsubscribeFromTopic')({ topic, token: this.token })
      .pipe(tap(_ => 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) => {
        console.log("new message received. ", payload);
        this.currentMessage.next(payload);
      })
  }

    enter code here**strong text**

}

this is the page where I called the fcmService

home.ts

   import { FcmService } from '../services/fcm.service';

         constructor(
    private fcm: FcmService,
    ){}

     ngOnInit(){
          this.fcm.receiveMessage()
          this.messageData = this.fcm.currentMessage
    }

I have Imported this file to the 'src' directory firebase-messaging-sw.js

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();

angular.json

"assets": [

              "src/firebase-messaging-sw.js",
              {

                "glob": "**/*",
                "input": "src/assets",
                "output": "assets"
              }
]

Answer 1

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.

FcmService.ts

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<any>;

  constructor(
    private db:AngularFirestore,
    private afMessaging: AngularFireMessaging,
    private fun: AngularFireFunctions,
    private toastController: ToastController
  ) {

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

  }


  getPermission() {
    this.afMessaging.requestToken
      .subscribe(
        (token) => { 
          this.token = token

          console.log('Permission granted! Save to the server!', token); },
        (error) => { console.error(error); },  
      );
  }




  sub(topic) {
    this.fun
      .httpsCallable('subscribeToTopic')({ topic, token: this.token })
      .pipe(tap(_ => this.makeToast(`subscribed to ${topic}`)))
      .subscribe();
  }

  unsub(topic) {
    this.fun
      .httpsCallable('unsubscribeFromTopic')({ topic, token: this.token })
      .pipe(tap(_ => 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) => {
        console.log("new message received. ", payload);
        this.currentMessage.next(payload);
      })
  }

    enter code here**strong text**

}

this is the page where I called the fcmService

home.ts

   import { FcmService } from '../services/fcm.service';

         constructor(
    private fcm: FcmService,
    ){}

     ngOnInit(){
          this.fcm.receiveMessage()
          this.messageData = this.fcm.currentMessage
    }

I have Imported this file to the 'src' directory firebase-messaging-sw.js

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();

angular.json

"assets": [

              "src/firebase-messaging-sw.js",
              {

                "glob": "**/*",
                "input": "src/assets",
                "output": "assets"
              }
]

Answer 2

Firebase has stated that messaging will not work over http. If you are serving a web app locally with a specific ip address you may need to use the flag --ssl otherwise make sure that your build is being hosted with an ssl certificate.

Github Issue

Check towards the end for the reference.

Also, I believe the bug has been fixed so you might want to remove the "bug fix" snippet

// No longer needed
_messaging.onMessage = _messaging.onMessage.bind(_messaging);
_messaging.onTokenRefresh = _messaging.onTokenRefresh.bind(_messaging);

and handle the result regularly.