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

Question

我无法收到通知请帮助我解决问题。 如果有人知道离子/角度网络应用程序中 firebase 网络通知的更好解决方案，请帮助我。

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 的页面

主页.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();

角度.json

"assets": [

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

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

Answer 1

我无法收到通知 请帮我解决问题。 如果有人知道 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 的页面

家.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 2

Firebase 已声明消息传递将无法通过 http 工作。 如果您使用特定的 IP 地址在本地提供 Web 应用程序，您可能需要使用标志--ssl否则请确保您的构建是使用 ssl 证书托管的。

Github 问题

检查最后以获取参考。

此外，我相信该错误已得到修复，因此您可能希望删除“错误修复”片段

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

并定期处理结果。