HomeНаука и техникаRelated VideosMore From: Angular Firebase

Send Push Notifications in Angular with Firebase Cloud Messaging

353 ratings | 37777 views
Learn how to send push notifications to users, even after they have closed an Angular app in the browser. Check out the full lesson code here: https://angularfirebase.com/lessons/send-push-notifications-in-angular-with-firebase-cloud-messaging Official Firebase Cloud Messaging (FCM) docs: https://firebase.google.com/docs/cloud-messaging/
Html code for embedding videos on your blog
Text Comments (38)
Midhun Jayan (15 days ago)
How to handle the click action in front end when a notification is received ?
Naser Masri (1 month ago)
any one can help me ? ill really appreciate it!
Naser Masri (1 month ago)
Hallo, can u make a video for push notification for grope using cloud firebase function but use react? Thanks a lot
Nyaz Khan (2 months ago)
how to receive a notification with the user details from firebase web app when a user register on web app on email or on phone
AutoAthletics (3 months ago)
Does it work on mobile phones ?
marwan salem (4 months ago)
thanks so much for the video! but i would like to send to many users at the same time. How could i do it? thanks in advance!
Mateja Petrović (4 months ago)
Thanks so much for the video, Jeff. I was wondering if you could make an update regarding push notifications using firestore and perhaps a cloud function in typescript. I'm struggling with setting up the function, hopefully I'll the official docs have an answer.
Tensaiz (5 months ago)
Would it be possible to use Firebase hosting ONLY for the messaging and notifications, but use a seperate DB / API setup to store messages? I developed a REST Java API for my angular application, but to implement chat functionalities I need so somehow push data to the angular application. I was thinking if it's worth specially hosting on Firebase for this (even though we won't be using any of the APIs because we have our own implementations) or using a socket.io implementation and using a NodeJS server to host the app or something... do you have any ideas?
Semah Belguesmi (8 months ago)
this tutorial is very useful thanks, please can u post another tutorial but wih firebase RTDB instead of Firestore ?.. it's really very important to me. thanks again :)
Umar Ibn Al-khattab (8 months ago)
awesome video ! thanks a lot. just I have a little question .. can we use this method with database not Firestore ?
Umar Ibn Al-khattab (8 months ago)
Angular Firebase Thats great :) thanks bro
Angular Firebase (8 months ago)
You can use either RTDB or Firestore to save the FCM tokens. Both work great for this.
Have a error with the reference firebase. Por example: firebase.initializeApp... firebase.messaging.... Requiered a library install? I'm work with Angular 4
Ashit Vora (8 months ago)
Does your course help if I am not familiar with Angular4? I have used Angular 1.x alot but then switched to Vue2.
Angular Firebase (8 months ago)
Most of my content is focuses on Angular 2+ or just Firebase.
Angel Leal (9 months ago)
awesome tutorials bro! any idea how to implement this with angular 1 ?
Angular Firebase (9 months ago)
The implementation should be very similar. The service worker would be identical in an AngularJS1 app.
takwinland sindibadgroup (10 months ago)
What is the name of the soundtrack played in the start of each of your movies ?
Georgi Arnaudov (1 year ago)
@Angular Firebase Thank you for the great content that you are putting out there! One suggestion for those who found out that this approach will work only for one device. You can use the code from this codelab example https://codelabs.developers.google.com/codelabs/firebase-cloud-functions/#9 It helped me to make it work for multimple devices. Also want to mention that you must include the onTokenRefresh callback to ensure you have the latest token. Otherwise notification wont be sent. :)
Georgi Arnaudov (1 year ago)
Cool, looking forward to it! I actually just finished my version of the script using Firestore, React + Redux and it worked flawlessly :)
Angular Firebase (1 year ago)
+Georgi Thank you. That is very helpful. I have a revised video planned for Firestore that will support multiple devices.
Vipul Singh (1 year ago)
i got error like this __WEBPACK_IMPORTED_MODULE_3_firebase_app__.messaging is not a function.
Vitaly Tatarzhinsky (4 months ago)
in my case this error was caused by "import * as firebase from 'firebase/app' " instead of "import * as firebase from 'firebase' ", if im not mistaken)
Theristes (4 months ago)
import 'firebase/messaging';
Mohan Seth (6 months ago)
Thanks for the solution Mustafa
Mustafa Hossaini (1 year ago)
This will fix it. change the import to import * as firebase from 'firebase'
Mustafa Hossaini (1 year ago)
i get the same error.. I reinstall all packages.. still dont fix.. i think this is an upate to angularfire2 which this video isnt convering.. will post solution when i find it.
Stian Bay (1 year ago)
Didn't got it to work and figgured out the index.js file have to be in the functions folder that firebase creates
Angular Firebase (1 year ago)
+Stian Thank you for sharing. I cover Firebase Cloud Functions in other videos so I just blew over that part.
Ryann Galea (1 year ago)
Your channel is perfect mate, Thanks for the content. Super relevant for myself!
Nipun Sachdeva (7 months ago)
Will this work with PWAs ?
Johan Walhout (1 year ago)
Can you make a video to show this notification on a mobile device? Would love to! Great vid btw!
Angular Firebase (1 year ago)
Yes, FCM is designed for use with mobile devices, but there is some additional setup for integrating with native iOS or Andriod apps. This video is focused on the browser/service worker implementation.
Ryann Galea (1 year ago)
One question i didn't find in this video, are you able to send the notification to mobile device also?
Angular Firebase (1 year ago)
+Ryann Thanks for the feedback!
pillar six (1 year ago)
Nice video dude, keep up the good work! anyway you could make a video about SEO with angular like Angular Universal or a video about connecting different pieces of data within an application? for example, a user with his id and then other parts of the application tagged with his id can search up his information?
Angular Firebase (1 year ago)
Yes, I want to do an SEO video covering server side rendering, but I'm waiting for the Angular team to provide more guidance on official best practices. Hopefully that happens soon...

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.