FCM setup for push notification in angular 6 web app - firebase

Question

I am trying to integrate fcm in my angular 6.
Here is what i have done.
firebase-messaging-sw.js
importScripts('https://www.gstatic.com/firebasejs/3.9.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/3.9.0/firebase-messaging.js');
firebase.initializeApp({
'messagingSenderId': '93480234033'
});
const messaging = firebase.messaging();
push-notification.js
import firebase from 'firebase';
export const askForPermissioToReceiveNotifications = async () => {
try {
const messaging = firebase.messaging();
console.log('000ooppp', messaging)
messaging.requestPermission()
.then(function(){
console.log('I am in here');
return messaging.getToken()
.then(function(currentToken) {
console.log(currentToken);
})
}).catch(function(err) {
console.log('Unable to get permission to notify.', err);
});
} catch (error) {
console.error(error);
}
}
these two files are in src folder.
i have created an app on firebase console and i have got the config object
config: {
apiKey: "*****",
authDomain: "*****",
databaseURL: "*****",
projectId: "*****",
storageBucket: "*****",
messagingSenderId: "*****"
}
And in my app.module.ts file i am initialising firebase with the above object
import { AngularFireModule } from 'angularfire2';
import { ServiceWorkerModule } from '#angular/service-worker';
and then in import
imports: [
...
...
AngularFireModule.initializeApp(environment.firebase),
ServiceWorkerModule.register('/combined-worker.js', { enabled: environment.production })
...
...
]
and in app.component.ts
import { askForPermissioToReceiveNotifications } from './../push-notification';
ngOnInit () {
console.log('pop')
askForPermissioToReceiveNotifications();
}
what i want to do is when user lands on the page and he allows notification to be shown to him, a unique device token id should be generated for that particular user, how can i generate device token id when he clicks on show notification?
getting this error in console
Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app)

Answer 1

src/firebase-messaging-sw.js
importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase-messaging.js');
var config = {
apiKey: "",
authDomain: "",
databaseURL: "",
projectId: "",
storageBucket: "",
messagingSenderId: ""
};
firebase.initializeApp(config);
const messaging = firebase.messaging();
now in app.module.ts
import {BrowserModule} from '#angular/platform-browser';
import {NgModule} from '#angular/core';
import {AppComponent} from './app.component';
import { AngularFireModule } from 'angularfire2';
import { AngularFireMessagingModule } from 'angularfire2/messaging';
const config = {
apiKey: '',
authDomain: '',
databaseURL: '',
projectId: '',
storageBucket: '',
messagingSenderId: ''
};
#NgModule({
declarations: [
AppComponent
],
imports: [
AngularFireModule.initializeApp(config),
AngularFireMessagingModule
],
bootstrap: [AppComponent]
})
export class AppModule {
}
inside your component that yout want to require permission to send notification:
import {Component, OnInit} from '#angular/core';
import { AngularFireMessaging } from 'angularfire2/messaging';
import { mergeMapTo } from 'rxjs/operators';
export class HomeComponent implements OnInit {
constructor(private _messaging: AngularFireMessaging) {
}
ngOnInit() {
/* request permission */
this._messaging.requestPermission
.pipe(mergeMapTo(this._messaging.tokenChanges))
.subscribe(token => {
console.log(token);
}, err => console.log(err));
/* listen for messages */
this._messaging.messages.subscribe((message: {notification}) => {
console.log(message.notification.title);
console.log(message.notification.body);
});
}
}
Remember that there 2 ways receiving push notifications
1) when the app is open:
you'll have to handle it showing the message
2) when the app is closed:
the browser handle it for you

Answer 2

Hello #wazz try setting your firebase config in your app.module.ts and import firebase
import * as firebase from 'firebase';
...
firebase.initializeApp(firebase_config);