loading...

Angular 8 + Firebase Cloud Messaging Push Notifications

Mayur Kadam on January 25, 2020

Are you looking for push notification which is normally you seen in ANDROID application or IOS application which is basically giving popup on your ... [Read Full]
markdown guide
 

Hi I am getting below mentioned error.

Unable to get permission to notify. TypeError: Failed to execute 'subscribe' on 'PushManager': The provided value is not of type '(ArrayBuffer or ArrayBufferView)'

 
 

Check for version on firebase and also check notification permission on ur browser

 

I'm facing the same issue. My firebase was previously in 7.7.0. After update to 7.8.2, still getting the error. It was working before so i'm a bit confused

 

Check for version on firebase and also check notification permission on ur browser

 

version is 7.8.1 and all the browser permissions are allowed. still, I am facing the same issue.

 

mayur bhau mala ek error yetoy yaar help kr na bhau..

ERROR in src/app/services/messaging.service.ts:10:31 - error TS2339: Property 'messaging' does not exist on type 'AngularFireMessaging'

code ->

this.angularFireMessaging.messaging.subscribe(
(_messaging) => {
_messaging.onMessage = _messaging.onMessage.bind(_messaging);
_messaging.onTokenRefresh = _messaging.onTokenRefresh.bind(_messaging);
}
)

1st line of code bg

 

Check version of install angular fire module

 
 

right now in current market if you look for an alternative to firebase then look into aws they are also providing the same services

 

Hi, I have a dashboard project with angular 8 and my friend have a mobile application project with Kotlin.
I want to send a notification from my dashboard to her mobile application.
My question is how can I send the notification? Should I do the same as the tutorial?

 

zone.js:699 Unhandled Promise rejection: this._next is not a function ; Zone: ; Task: ServiceWorkerContainer.addEventListener:message ; Value: TypeError: this._next is not a function
at WindowController.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next as onMessageCallback
at WindowController. (index.esm.js:1067)
at step (tslib.es6.js:100)
at Object.next (tslib.es6.js:81)
at tslib.es6.js:74
at new ZoneAwarePromise (zone.js:915)
at __awaiter (tslib.es6.js:70)
at WindowController.push../node_modules/@firebase/messaging/dist/index.esm.js.WindowController.messageEventListener (index.esm.js:1056)
at ServiceWorkerContainer. (index.esm.js:890)
at ZoneDelegate.invokeTask (zone.js:431) TypeError: this._next is not a function
at WindowController.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next as onMessageCallback
at WindowController. (localhost:4200/firebase-messaging....)
at step (localhost:4200/vendor.js:180014:23)
at Object.next (localhost:4200/vendor.js:179995:53)
at localhost:4200/vendor.js:179988:71
at new ZoneAwarePromise (localhost:4200/polyfills.js:4720:33)
at __awaiter (localhost:4200/vendor.js:179984:12)
at WindowController.push../node_modules/@firebase/messaging/dist/index.esm.js.WindowController.messageEventListener (localhost:4200/firebase-messaging....)
at ServiceWorkerContainer. (localhost:4200/firebase-messaging....)
at ZoneDelegate.invokeTask (localhost:4200/polyfills.js:4236:35)

forground error please help

"@angular/fire": "^5.4.2",
"firebase": "^7.14.2",

 

Good morning, thanks for the tutorial, it has helped me a lot in my project, however I have a question, how can I get to "get" the response of the firebase service from any page?

What happens is that my project has several pages, even though I declare the objects in the "AppComponent" as it is in your example, when I pass to another screen the service response is stopped "listening".

How could I solve this so that I am always "listening" to the service from any page of my project?

 

Thanks for the good article.

Does FireBase SDK itself look for firebase-messaging-sw.js file? Don't we need to import it anywhere on page or manifest? (except importing it in Angular.json)

 

Thanks alot for wonderful tutorial. I have implemented FCM on my Angular web app. I can receive ONLY the background notification ( when app is not active ), Im not sure what I have missed

 

Check out video tutorial which shown in this post bcoz i solve the same problem in that video

 

it is working perfectly in localhost(both foreground and background)
but in https:// only working the background notification. No console errors are showing there

 

Hi @mayur thanks for the FCM,
it is working perfectly in localhost(both foreground and background)
but in https:// only working the background notification. No console errors are showing there

 

Hi Mayur, this doesn't work when browser is closed, in other case, work like a charm.

 

Yes agreeed bcoz service is running on browser so open browser is the main condition

 

Great tutorial. Very detailed. One question - isn't it better to install Firebase Messaging via NPM instead of importing the scripts?

 

Yes we will install firbase via npm and in this post i show the both of them and for the push notification we req both bcoz we are importing firebase script in service worker so it will run in background and one is install via npm which is going to use in forground...
See the video tutorial for more clear understanding

 

Great! works perfectly

Is there some way to customize the browser icon in notifications

 

Hi it displays the notification in the index but there are no notification popup shows.

code of conduct - report abuse