如何在应用程序处于前台时显示弹出通知

Question

我正在构建一个 Angular PWA ，其中我整合了Firebase推送通知。我已经完成了所有工作，我只在应用程序的后台获得弹出通知但我希望当用户使用应用程序时弹出通知应该在那里，或者你可以说，当应用程序在前台。

Component.ts：

import {Component, OnInit} from '@angular/core';
import * as firebase from 'firebase';
import {AngularFireDatabase, AngularFireList} from 'angularfire2/database';
//import {AngularFireDatabase, FirebaseListObservable, FirebaseObjectObservable} from 'angularfire2/database-deprecated';
import {PushService} from './push.service';

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


export class AppComponent {


  // Declare the variables used
  messaging: any
  token: any  // Stores the current token ID instance generated
  items: AngularFireList<any[]>
  itemsDisplay: AngularFireList<any[]> // List observable for template view (Optional. items itself can be used)
  itemsArr: any[] // Stores the token IDs retrieved from the firebase database 
  hideToken: boolean = false

  // Notificayion object
  pushData: any = {
    'notification': {
      "title": "Background Message Title",
      "body": "Background Message Body"
    },
    "to": ""
  }

  constructor(public db: AngularFireDatabase, private pushService: PushService) {

    // Creates a Firebase List Observable and calls the data in it
    this.itemsDisplay = db.list('/items')

    // Declaring the property value of messaging
    this.messaging = firebase.messaging();

    // Check for token refresh
    this.messaging.onTokenRefresh(function() {
      this.messaging.getToken()
        .then(function(refreshedToken) {
          console.log('Token refreshed.');
        })
        .catch(function(err) {
          console.log('Unable to retrieve refreshed token ', err);
        });
    });
    // Obtaining the firebase data and retrieving token ID values separately
    this.itemsArr = []  // Reinitialize the array to prevent data duplication
    this.items = this.db.list('/items');
    this.items.valueChanges().subscribe(snapshots => {

      console.log("SNAPSHOT RECIEVED-----"+snapshots);
      //snapshots.forEach(snapshot => {
      //  console.log("Hey ,, snapshot......"+snapshot);
     // this.itemsArr.push(snapshot.child("items").val().tokenID);
      // });
    });
    // console.log(this.itemsArr)
  }

  // Check for duplicates in token subscription
  checkToken(token, arr) {
    console.log("Inside check token function")
    console.log(arr)
    console.log(token)
    let counter: number = 0
    for (var i = 0; i < arr.length; i++) {
      if (arr[i] === token) {
        counter++
      }
    }
    console.log("Counter value", counter)
    return counter
  }

  // Generate Push through an event
  generatePush() {
    console.log("Inside push function")
    console.log(this.pushData.to)
    if (this.pushData.to === "") {
      console.log("No token available")
      return
    }
    this.pushService.generatePush(this.pushData)
      .subscribe(data => {console.log("Succesfully Posted")}, err => console.log(err))
  }

  // Function to get the data from Firebase Database
  getDataFromFb() {
    this.hideToken = true
  }

  ngOnInit() {
    // Prompt user to grant permission for notifications on loading components
    const self = this
    this.items = this.db.list('/items')
    this.messaging.requestPermission()
      .then(function() {
        console.log('Notification permission granted.');
        return self.messaging.getToken()
          .then(function(currentToken) {
            if (currentToken) {
              self.token = currentToken
              self.pushData.to = self.token
              console.log(self.pushData.to)

              // Set a timeout so as to enable all the data to be loaded
              setTimeout(() => {
                if (self.checkToken(self.token, self.itemsArr) === 0) {
                  console.log("Push occurrence")
                  //self.items.push({tokenID: currentToken})
                } else {
                  console.log("User is already subscribed")
                }
              }, 6500)
              // Displays the current token data
              console.log("currentToken: ", currentToken);
              console.log("Stored token: ", self.token);
            } else {
              // Show permission request.
              console.log('No Instance ID token available. Request permission to generate one.');
            }
          })
          .catch(function(err) {
            console.log('An error occurred while retrieving token.', err);
          });
      })
      .catch(function(err) {
        console.log('Unable to get permission to notify. ', err);
      })

    // Handle incoming messages. Called when:
    // - a message is received while the app has focus
    // - the user clicks on an app notification created by a sevice worker `messaging.setBackgroundMessageHandler` handler.
    this.messaging.onMessage(function(payload) {
      console.log("Message received. ", payload);
    });
  }

}

以下是在背景上显示通知的代码：

messaging.setBackgroundMessageHandler(function(payload) {
        console.log('[firebase-messaging-sw.js] Received background message ', payload);
        // Customize notification here
        const notificationTitle = 'Background Message Title';
        const notificationOptions = {
            body : 'Background Message body.',
            icon : '/firebase-logo.png'
        };

        return self.registration.showNotification(notificationTitle,
            notificationOptions);
    });

请告诉我，我该如何实现该功能。

Answer 1

这样的事情应该有所帮助：

import { Inject, Injectable } from '@angular/core';
import { FirebaseApp } from "angularfire2";
import * as firebase from 'firebase/app';
import 'firebase/messaging';

@Injectable()
export class MessagingService {
  private messaging: firebase.messaging.Messaging;

  constructor(
    @Inject(FirebaseApp) private _firebaseApp: firebase.app.App
  ) {
    this.messaging = firebase.messaging(this._firebaseApp);
  }

  receiveMessage() {
    this.messaging.onMessage((payload) => {
      //do stuff
    });
  }
}

在组件（可能是AppComponent）中调用receiveMessage()。

还将以下内容添加到您的AppModule中：

import { AngularFireModule } from '@angular/fire';
.....
AngularFireModule.initializeApp({/*firebase settings*/})