angular - 使用 Firebase 云消息传递 Angular 在 PWA 中处理来自推送通知的有效负载信息

Question

我正在使用 ionic / angular 在 pwa 中实现推送通知，一切对我来说都很完美，但是当我收到推送时，不会触发事件来获取有效负载。

因此，当它首先请求许可以获取通知时，然后当许可被授予时，接收消息方法是火，但我没有从推送中获取信息

这是服务

import { Injectable } from '@angular/core';
import { AngularFireMessaging } from '@angular/fire/messaging';
import { mergeMapTo } from 'rxjs/operators';
import { AngularfireService } from './angularfire.service';
import { HttpClient, HttpHeaders} from '@angular/common/http';
import { BehaviorSubject } from 'rxjs';



@Injectable({
  providedIn: 'root'
})


export class PushService {
  
  currentMessage = new BehaviorSubject(null);

     constructor( private afMessaging: AngularFireMessaging,
                public afs:AngularfireService,
                public http:HttpClient) {

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

    requestPermission(user) {
    console.log(user);
    this.afMessaging.requestPermission
      .pipe(mergeMapTo(this.afMessaging.tokenChanges))
      .subscribe(
        (token) => { console.log('Permission granted! Save to the server!', token); 
          this.afs.GuardarTokenPush(user,token); this.receiveMessage()},
        (error) => { console.error(error); },  
      );
  }
  receiveMessage() {
    console.log('Receive message');
    this.afMessaging.messages.subscribe(
      (payload) => {
      console.log("new message received. ", payload);
      this.currentMessage.next(payload);
      })
  }
  


         THIS IS my app.component.ts



import { Component } from '@angular/core';

import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AngularfireService } from './servicios/angularfire.service';
import { SwPush, SwUpdate } from '@angular/service-worker';
import { AlertsService } from './servicios/alerts.service';
import { PushService } from './servicios/push.service';



@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent {

  constructor( 
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private afs :AngularfireService,
    private swUpdate: SwUpdate,
    private AS:AlertsService,
    private PS:PushService   
   
  ) {
    this.initializeApp();
    this.CheckNewVersion()

  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    

  
    });
  }

  ngOnInit() {
    this.PS.receiveMessage();
    
    

  }
 
  CheckNewVersion(){
  
    if (this.swUpdate.isEnabled) {
      console.log(this.swUpdate.isEnabled);
     

      this.swUpdate.available.subscribe(() => {
        this.AS.Update().then((result) => {
          if (result.value) {
            window.location.reload();
          }
        })
        
          
      });
  }
  }

}

标签： angular