Angular 8，Firebase 推送通知：无法在推送通知上获取调试器或自定义逻辑

Posted 2023-02-24

【中文标题】Angular 8，Firebase 推送通知：无法在推送通知上获取调试器或自定义逻辑

【英文标题】：Angular 8, Firebase Push Notification: Not able to get debugger OR custom logic on pushed notification

【发布时间】：2020-05-29 02:59:21

【问题描述】：

我已经在这个平台上审查并实施了一些已经提出和回答的问题。我能够在屏幕上推送默认弹出窗口，但是我无法摆脱如何在我的自定义列表中添加这些新的推送通知并在 UI 中显示给最终用户。我想收集新的通知并将其存储在我的应用程序变量中，以便我可以解决它并向用户显示所有通知。

下面是我实现的代码。

Package.json

"dependencies": 
"@agm/core": "^1.0.0",
"@angular-devkit/core": "^8.3.16",
"@angular-devkit/schematics": "^8.3.16",
"@angular/animations": "^8.2.12",
"@angular/cdk": "^8.2.3",
"@angular/common": "^8.2.13",
"@angular/compiler": "^8.2.12",
"@angular/core": "^8.2.12",
"@angular/forms": "^8.2.12",
"@angular/platform-browser": "^8.2.12",
"@angular/platform-browser-dynamic": "^8.2.12",
......
"@angular/fire": "^5.2.3",
"@angular/platform-server": "8.0.0",
"@nguniversal/module-map-ngfactory-loader": "8.0.0-rc.1",
"aspnet-prerendering": "^3.0.1",
"firebase": "^7.5.0"
,

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

// Initialize the Firebase app in the service worker by passing in the
firebase.initializeApp(
  apiKey: 'xyz',
  authDomain: 'xyz',
  databaseURL: 'xyz"',
  projectId: 'xyz',
  storageBucket: 'xyz',
  messagingSenderId: '168382776603',
  appId: '1:168382776603:web:65c285a048d740401a3fbe'
);

// Retrieve an instance of Firebase Messaging so that it can handle background
const messaging = firebase.messaging();

app.module.ts

imports: [
    FormsModule,
    BrowserModule,
    AppRoutingModule,
    .....,
    AngularFireModule.initializeApp(
      apiKey: 'xyz',
      authDomain: 'xyz',
      databaseURL: 'xyz"',
      projectId: 'xyz',
      storageBucket: 'xyz',
      messagingSenderId: '168382776603',
      appId: '1:168382776603:web:65c285a048d740401a3fbe'
    ),
    AngularFireMessagingModule,
  ]

FirebasePushNotificationService.ts

    export class FirebasePushNotificationService 

    constructor(private angularFireMessaging: AngularFireMessaging) 
      this.angularFireMessaging.messaging.subscribe(
        (messagingContext: any) => 
          messagingContext.onMessage = messagingContext.onMessage.bind(messagingContext);       
          messagingContext.onTokenRefresh = messagingContext.onTokenRefresh.bind(messagingContext);
        );    
    

    currentMessage = new BehaviorSubject(null);

    requestPermission = () => this.angularFireMessaging.requestToken;

    removeToken = (token: string) => this.angularFireMessaging.deleteToken(token);

    receiveMessage = () => this.angularFireMessaging.messages;
  

app.component.ts (onInit)：我需要在 receiveMessage() 中调试器

this.firebasePushNotificationService.requestPermission().subscribe(
        token => 
            console.log('Push Token', token);
        ,
        error => 
            console.log('Push Error', error);
        
    );

this.firebasePushNotificationService.receiveMessage().subscribe(message => 
        **// I am not able to get debugger here**
        console.log(message);
    );

【参考方案1】：

终于解决了这个问题。除了 firebase 版本外，所有代码都可以正常工作，所以我已经更新了 packag.json 中的版本，如下所示，它工作正常。

"@angular/fire": "^5.3.0",
"firebase": "7.3.0"

然后在 firebase-messaging-sw.js

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

要获取后台消息，请在 firebase-messaging-sw.js 中添加以下代码，如果您想在自定义 url 上导航，还可以单击事件侦听器。这个“setBackgroundMessageHandler”只会在你的推送响应有数据字段而不是通知示例如下的情况下执行

带数据字段的推送响应：

    "token" : "epFYFDGqb9ghFezyW5_Wyh:APA91bEDBKPcu7Vq....",
    "data": 
      "title": "FCM Message",
      "body": "This is a message from FCM",
      "click_action": "https://localhost:4200"
    

后台消息事件

messaging.setBackgroundMessageHandler(function (payload) 
  console.log('[firebase-messaging-sw.js] Received background message ', payload);

  const notificationTitle = payload.data.title;
  const notificationOptions = 
    body: payload.data.body,
    icon: '/firebase-logo.png',
    data: payload.data
  ;

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

self.addEventListener('notificationclick', function (event) 
  event.notification.close();

  let navigateUrl = event.notification.data.click_action;

  event.waitUntil(
    clients.openWindow(navigateUrl)
  );
);

【讨论】：

我在后台收到两次推送通知，在前台相同的实现工作正常。