Question

当应用程序在后台时，推送通知工作正常。但是当我切换到前台时，通知没有显示。 我使用 yarn install 来更新 firebase 包，当它显示错误时通知在前台延迟响应，稍后在后台显示为推送通知。

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({
   my config
});
const messaging = firebase.messaging();
self.addEventListener('notificationclick', function(event) {
  event.notification.close();
  event.waitUntil(self.clients.openWindow(event.notification.data.url));
});

messaging.service.ts

import { Injectable } from '@angular/core';
import { AngularFireMessaging } from '@angular/fire/messaging';
import { BehaviorSubject } from 'rxjs'
import { NotificationService } from '../services/notification/notification.service';

@Injectable()
export class MessagingService {
currentMessage = new BehaviorSubject(null);
constructor(private angularFireMessaging: AngularFireMessaging,
    private notificationService:NotificationService) {
this.angularFireMessaging.messaging.subscribe(
(_messaging) => {
_messaging.onMessage = _messaging.onMessage.bind(_messaging);
_messaging.onTokenRefresh = _messaging.onTokenRefresh.bind(_messaging);
}
)
}
requestPermission(userid:any) {
this.angularFireMessaging.requestToken.subscribe(
(token) => {
    var t={};
    t["FCMToken"]=token;
    t["CandidateID"]=userid;
    t["DeviceType"]=2;
    this.notificationService.FcmAddDevice(t).subscribe(data=>{
        var response=data;
      });
console.log(token);
},
(err) => {
console.error('Unable to get permission to notify.', err);
}
);
}
receiveMessage() {
    console.log("service initialized")
this.angularFireMessaging.messages.subscribe(
(payload:any) => {
    console.log("new message received. ", payload);
    const NotificationOptions = {
            body: payload.notification.body,
            data: payload.data,
            icon: payload.notification.icon
          }
          navigator.serviceWorker.getRegistration('/firebase-cloud-messaging-push-scope').then(registration => {
            registration.showNotification(payload.notification.title, NotificationOptions);
          });
    this.currentMessage.next(payload);})
}
}

我正在使用

Angular CLI: 8.3.29
Node: 14.16.0
OS: win32 x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.29
@angular-devkit/build-angular     0.803.29
@angular-devkit/build-optimizer   0.803.29
@angular-devkit/build-webpack     0.803.29
@angular-devkit/core              8.3.29
@angular-devkit/schematics        8.3.29
@angular/cli                      8.3.29
@angular/fire                     5.4.2
@angular/http                     7.2.16
@ngtools/webpack                  8.3.29
@schematics/angular               8.3.29
@schematics/update                0.803.29
rxjs                              6.6.7
typescript                        3.5.3

firebase 7.6.0 但是，当我使用示例应用程序尝试相同时，此方法有效。

Angular 8 Firebase 推送通知未显示在前台

0 个答案: