How to configure Angular 9 Firebase Push Notification

Viewed 2208

I want to add Firebase Push Notifications, but have several issues. Im following these tutorials: https://medium.com/@a.adendrata/push-notifications-with-angular-6-firebase-cloud-massaging-dbfb5fbc0eeb https://medium.com/mighty-ghost-hack/angular-8-firebase-cloud-messaging-push-notifications-cc80d9b36f82

1. I am not sure where to use this ID. In firebasoConfig its called messagingSenderId. enter image description here

2. Another ID goes to manifest.webmanifest. Is the following statement correct?

gcm_sender_id is same for ALL application in the world, do not change it.

{
  "gcm_sender_id": "103953800507"
}

3. I have the console error about firebase permisions.

index.esm.js:106 [2020-07-12T17:48:16.265Z] @firebase/database: FIREBASE WARNING: update at /fcmTokens failed: permission_denied zone-evergreen.js:659 Unhandled Promise rejection: PERMISSION_DENIED: Permission denied ; Zone: ; Task: WebSocket.addEventListener:message ; Value: Error: PERMISSION_DENIED: Permission denied

before this error goes console.log from PushNotificationService with token. I suppose that I didnt apply corretly userId. What ID I have to send?

CODE:

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

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

// Get Instance ID token. Initially this makes a network call, once retrieved
// subsequent calls to getToken will return from cache.
messaging.getToken().then((currentToken) => {
    if (currentToken) {
      console.log(currentToken)
      sendTokenToServer(currentToken);
      updateUIForPushEnabled(currentToken);
    } else {
      // Show permission request.
      console.log('No Instance ID token available. Request permission to generate one.');
      // Show permission UI.
      updateUIForPushPermissionRequired();
      setTokenSentToServer(false);
    }
  }).catch((err) => {
    console.log('An error occurred while retrieving token. ', err);
    showToken('Error retrieving Instance ID token. ', err);
    setTokenSentToServer(false);
  });

Here I have again error output from console.log('An error occurred while retrieving token. ', err)

An error occurred while retrieving token. ReferenceError: sendTokenToServer is not defined at firebase-messaging-sw.js:25 firebase-messaging-sw.js:36 Uncaught (in promise) ReferenceError: showToken is not defined

manifest.webmanifest

{
  "name": "app",
  "short_name": "app",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "./",
  "start_url": "./",
  "gcm_sender_id": "103953800507",
  "icons": [
    {
      "src": "assets/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png",
      "purpose": "maskable any"
    },
}....

AppComponent

constructor(private push: PushNotificationService) 
  {}

  ngOnInit() {
    this.initNotify()
  }

  initNotify() {
    const userId = '001'
    this.push.requestPermission(userId)
    this.push.receiveMessage()
    this.message = this.push.currentMessage
  }

PushNotificationService

import { Injectable } from '@angular/core'
import { AngularFireDatabase } from '@angular/fire/database'
import { AngularFireAuth } from '@angular/fire/auth'
import { AngularFireMessaging } from '@angular/fire/messaging'
import { take } from 'rxjs/operators'
import { BehaviorSubject } from 'rxjs'

@Injectable({
    providedIn: 'root'
  })
export class PushNotificationService {

  currentMessage = new BehaviorSubject(null);

  constructor(
    private angularFireDB: AngularFireDatabase,
    private angularFireAuth: AngularFireAuth,
    private angularFireMessaging: AngularFireMessaging) {
    this.angularFireMessaging.messages.subscribe(
      (_messaging: any) => {
        _messaging.onMessage = _messaging.onMessage.bind(_messaging);
        _messaging.onTokenRefresh = _messaging.onTokenRefresh.bind(_messaging);
      }
    )
  }

  /**
   * update token in firebase database
   * 
   * @param userId userId as a key 
   * @param token token as a value
   */
  updateToken(userId, token) {
    // we can change this function to request our backend service
    this.angularFireAuth.authState.pipe(take(1)).subscribe(
      () => {
        const data = {};
        data[userId] = token
        this.angularFireDB.object('fcmTokens/').update(data)
      })
  }

  /**
   * request permission for notification from firebase cloud messaging
   * 
   * @param userId userId
   */
  requestPermission(userId) {
    this.angularFireMessaging.requestToken.subscribe(
      (token) => {
        console.log(token);
        this.updateToken(userId, token);
      },
      (err) => {
        console.error('Unable to get permission to notify.', err);
      }
    );
  }

  /**
   * hook method when new notification received in foreground
   */
  receiveMessage() {
    this.angularFireMessaging.messages.subscribe(
      (payload) => {
        console.log("new message received. ", payload);
        this.currentMessage.next(payload);
      })
  }
}
0 Answers
Related