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

並定期處理結果。