Show push notifications in React | FCM notifications in React @aseemwangoo #react #firebase

This video shows how to show push notifications in react using FCM or Firebase Cloud Messaging.

* Show push notifications in React | FCM notifications in React *

We will go through the following steps

1. Register the web app in Firebase
2. Setup Firebase Configurations in React
3. Integrate in UI
4. Test the Notification
5. (Optional) If notifications not appearing

This video shows you how to make the most of push messaging using FCM.

0:13 Demo of the app - foreground
0:55 Demo of the app - background
1:11 Configure firebase project
1:36 Setup firebase in React
2:48 Setup service worker
3:46 Create UI Components

In case, this helped, pass me a coffee!! 😊😊

#notifications #fcm #react

[NeerajSingh-ivbm]

Great content man
I rarely comment on a video but your simple and straight explanation is just fantastic.
Keep it up man. Keep it up

[kinjalbirare]

Hello, Thank you for sharing. This is very helpful to implement the FCM

[hackytech]

You are frekin god bro, Thanks a lot for the tutorial and the repo on git. It helped me alot.

[oz]

Hi, great tutorial. Any reason why I receive the notification twice?

[mike_]

hi sir, in demo of push notifications - background
how can i open the website notification

[hiutrun]

Hi ! I'm cloned your project and changed some config match on fire. Last night It's ran perfectly but in the morning. It's show error "FirebaseError: Messaging: A problem occurred while subscribing the user to FCM: Request is missing required authentication credential. Expected OAuth 2 access token, login cookie or other valid authentication credential.". Could you please show me how to resolve it ?. Thanks !

[ansupari]

But how to redirect if click on notification

[jamesonvparker]

Hi @Aseem, this is a great tutorial but it seems the process has changed with firestore v9. I get my token but fail to get any messages. Do you know what changed? I've checked the docs but Im still puzzled.

[SurendraNarayanRoy]

Can i use it in my expo project? Please reply.

[marlonm]

Hi... thanks for sharing... but is it possible to customize the notifications sound when receiving by the client?

[paramjotsingh]

which file to run to get FMC registration token? can anyone help!!

[sanketjoshi]

In my side 2 times I see the toast in Foreground notification I want only one time return tostcontainer

[franciscocaldeira]

firebase has a limit, this is only for school projects

[PabloReinaLópez-yd]

Hello! I am having troubles with this because I am getting duplicate message notification. It seems like the Script firebase-messaging.js is making a register for showNotification by itself, beside The one I am writting on my service worker... How should I do this?

[farukhpatel]

Can we recieve foreground message like background message