使用 FCM 的角度推送通知答案

【问题标题】：Angular Push Notification with FCM使用 FCM 的角度推送通知
【发布时间】：2020-10-16 11:34:36
【问题描述】：

我需要使用 FCM 在我的项目中实现推送通知。我已经实现了后端并按预期工作。在 Angular 方面，我能够实现两种功能（后台和前台），此时我唯一的问题是我从推送通知获得的有效负载没有显示在我的 html 文件中。

这是我用 Angular (https://dev.to/mayurkadampro/angular-8-firebase-cloud-messaging-push-notifications-97a) 实现 FCM 的文章。

这是我的消息服务文件：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { AngularFireMessaging } from '@angular/fire/messaging';

@Injectable({
  providedIn: 'root'
})

export class MessagingService {
  currentMessage = new BehaviorSubject(null);
 
  constructor(private angularFireMessaging: AngularFireMessaging) {
  }
 
  requestPermission() {
    this.angularFireMessaging.requestToken.subscribe((token) => {
      console.log('Permission granted! Save to the server!', token);
    }, (error) => {
      console.log(error);
    })
  }
 
  receiveMessage() {
    this.angularFireMessaging.onMessage((payload) => {
      console.log('Message received. ', payload);
      this.currentMessage.next(payload);
    });
  }
}

app.component.ts 文件

import { Component, OnInit } from '@angular/core';
import { MessagingService } from './services/messaging.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})
export class AppComponent implements OnInit {
  title = 'pn';
  message;

  constructor(private _messagingSrv: MessagingService ) {}

  ngOnInit() {
    this._messagingSrv.requestPermission();
    this._messagingSrv.receiveMessage();
    this.message = this._messagingSrv.currentMessage;
  }

}

最后是 firebase-messaging-sw.js 文件：

importScripts('https://www.gstatic.com/firebasejs/7.6.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/7.6.0/firebase-messaging.js');

firebase.initializeApp({
  apiKey: "XXXXXXXXXXXXXXXXX",
  authDomain: "XXXXXXXXXXXXXXXXX",
  databaseURL: "XXXXXXXXXXXXXXXXX",
  projectId: "XXXXXXXXXXXXXXXXX",
  storageBucket: "XXXXXXXXXXXXXXXXX",
  messagingSenderId: "XXXXXXXXXXXXXXXXX",
  appId: "XXXXXXXXXXXXXXXXX",
  measurementId: "XXXXXXXXXXXXXXXXX"
});

const messaging = firebase.messaging();

项目中安装的 firebase 版本与 service worker 中使用的相同。 (7.6.0)

【问题讨论】：

标签： angular firebase push-notification firebase-cloud-messaging service-worker

【解决方案1】：

我有一个类似的问题，并通过在角度上使用 ng serve -ssl true 标志来修复你必须在 https 上才能显示前台通知

【讨论】：