Angular 8, Firebase Pu sh Уведомление: не удается получить отладчик ИЛИ настраиваемый лог c при отправленном уведомлении - PullRequest
Новая
       65

Angular 8, Firebase Pu sh Уведомление: не удается получить отладчик ИЛИ настраиваемый лог c при отправленном уведомлении

0 голосов

Я просмотрел и реализовал некоторые из уже заданных вопросов и ответил на них на этой платформе. Я могу получить всплывающее окно pu sh по умолчанию на экране, но, тем не менее, я не могу избавиться от того, как добавить это новое push-уведомление в свой настраиваемый список и показать конечному пользователю в пользовательском интерфейсе. Я хочу собрать новое уведомление и сохранить его в своей переменной приложения, чтобы я мог обойти его и отобразить все уведомления пользователю.

Ниже мой реализованный код.

Пакет. 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 Ответ

0 голосов
/ 03 июня 2020

Наконец-то избавьтесь от проблемы. Весь код работает нормально, кроме версии firebase, поэтому я обновил версию в пакете. 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 будет выполняться только в том случае, если ваш ответ pu sh содержит поле данных вместо уведомления пример, как показано ниже

Pu sh ответ с полем данных: 

{
    "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)
  );
});
...