Angular fire Messaging无法接收通知，如何解决此问题？

Question

我无法收到通知，请帮助我解决问题。如果有人在ionic / angular Web应用程序中了解Firebase Web通知的更好解决方案，请帮助我。

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**

}

这是我称为fcmService的页面

home.ts

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

         constructor(
    private fcm: FcmService,
    ){}

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

我已将此文件导入到'src'目录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

Example Link

我在一个离子项目中使用过