'Push notifications not working on live production server
My code is working properly on local environment but notifications arn't working on production. I'm using angular 8. Firebase 7.6.0 is being used.
When I am sending push notification from firebase console, it is working fine but when some request is hitting from live server admin panel then notifications are not sent. Node.js is used for Backend.
constructor(private messagingService: MessagingService){
if ("serviceWorker" in navigator) {
console.log('--------in service qorker condition')
window.addEventListener("load", function() {
navigator.serviceWorker.register("./firebase-messaging-sw.js").then(
function(registration) {
console.log(
"ServiceWorker registration successful with scope: ",
registration.scope
);
},
function(err) {
// registration failed :(
console.log("ServiceWorker registration failed: ", err);
}
);
});
}
}
ngOnInit() {
// const userId = 'user001';
// this.messagingService.requestPermission(userId);
this.messagingService.receiveMessage();
}
Above is app.component.ts constructor call
import { Injectable } from '@angular/core';
import { AngularFireMessaging } from '@angular/fire/messaging';
import { BehaviorSubject } from 'rxjs'
import { AngularFireDatabase } from '@angular/fire/database';
import { AngularFireAuth } from '@angular/fire/auth';
import { take } from 'rxjs/operators';
@Injectable()
export class MessagingService {
token: any = "";
currentMessage = new BehaviorSubject(null);
constructor(private angularFireDB: AngularFireDatabase,
private angularFireAuth: AngularFireAuth,
private angularFireMessaging: AngularFireMessaging) {
this.angularFireMessaging.messaging.subscribe(
(_messaging) => {
_messaging.onMessage = _messaging.onMessage.bind(_messaging);
_messaging.onTokenRefresh = _messaging.onTokenRefresh.bind(_messaging);
}
)
}
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)
})
}
requestPermission(userId) {
this.angularFireMessaging.requestToken.subscribe(
(token) => {
console.log(token);
this.token = token;
this.updateToken(userId, token);
},
(err) => {
console.error('Unable to get permission to notify.', err);
}
);
}
receiveMessage() {
this.angularFireMessaging.messages.subscribe((payload: any) => {
if (payload) {
console.log(payload, '----lasjkdfl');
navigator.serviceWorker.ready.then(function(service_worker) {
service_worker.showNotification(payload.notification.title, {
body: payload.notification.body
});
});
console.log("new message received. ", payload);
this.currentMessage.next(payload);
}
else{
console.log("no payload recieved");
}
});
}
}
Above is messaging service
this.messagingService.requestPermission(userId);
this.messagingService.receiveMessage();
this.message = this.messagingService.currentMessage;
Above code is called in login.component.ts
importScripts('https://www.gstatic.com/firebasejs/7.6.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/7.6.0/firebase-messaging.js');
Above is firebase-messaging-sw.js configuration
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
