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.

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