Push Notifications to Your Web Application in Browser Using Google Firebase (Cloud Messaging)

Push Notifications to Your Web Application in Browser Using Google Firebase (Cloud Messaging)

Music credit:
-
Music: Skylines - Anno Domini Beats
-

#reactjs #firebase #notification #browser #webapplications #cloudmessaging

[maskman]

Thank you for creating this tutorial, this is one and only firebase cloud messaging tutorial we can find on youtube, you are the man, thanks again 🙏

[galliharmada]

for those that facing error The script has an unsupported MIME type ('text/html'). on react, just create empty file (firebase-messaging-sw.js) under public directory

[dan_le_brown]

Came for the tutorial; stayed for the music! 🔥

[musiclearning]

really really thanks. I want to get use to reading documentation / learn to learn through documentation. documentation are alway scary and intimidating. but following this tutorial help me to tackle future problems as well. if you like to make more on firebase, I would love to see it as well.

[JamesTaylorson]

Thanks for sharing this! Great tutorial. Anyone struggling to see the test notification, having added a blank 'firebase-messaging-sw.js', look at your Mac OS settings (if on a mac) as you may be blocking your notifications in other ways.

[zainulkhan]

Done everything same but not able to get notification at 8:44
This is the payload of firebase
{displayName: "hi", state: "RUNNING", onStart: {}, …}
dataBundle: {}
displayName: "hi"
notificationOptions: {messageText: "testing", messageTitle: "hi", hasSound: false, imageUrl: "", expiryTime: "2419200s", …}
onStart: {}
state: "RUNNING"

[geovajonnathacorreia]

hey bro, thank you so much for this video <3

[johannbogota]

This code still work? because I have had problem with the browser chrome to get push notification? anyone knows or have the solution?

[mauriciobuda]

Hello! First, thank you very much for sharing this video. I have a question! What is shown in the video works well for me, but how can I generate a notification based on information entered by the user? For example, a reminder, and generate a notification for tomorrow at a certain time. I am from Argentina and I am writing this with the translator, I hope the question is understood

[mutluemre]

Hello, I downloaded your template and filled my firebaseConfig files. However, it does not show any notifications on Chrome. Do you know how I can solve it?

[khwbhawjfamilylivechannel]

this is my error: An error occurred while retrieving token. FirebaseError: Messaging: We are unable to register the default service worker. (how can i fixed it)

[troooooper]

i swear google and amazon create the shittest api ever

[jpg]

Howdy, i found your clip very helpful however i'm getting the error
FirebaseError: Messaging: We are unable to register the default service worker. The answers i've looked for in stack overflow all point out that i need to move it inside the public folder but if i move it inside the public folder i get the error saying i can't import stuff outside the src directory and this seems to be a create-react-app issue. Do you know of a fix for this, thanks in advance!

[utkarshyeolekar]

Does this work on safari 16 ? As safari 16 now supports the push messaging.
For me on safari, I does get the notifications, but after 3 notifications, it revokes the permission, I need to go again with the workflow of requesting the permission.

Even when I am showing the notification, it revokes the permission

[vanessaibale]

Hi, thank you for the tutorial, it all worked out except for the last part: the notification itself. I already tried closing the localhost site, allowing to display notifications, and it still doesnt work. Hope you can help me out on this :(

[javhaasuhochir]

I even cloned your project and changed my vapid key etc. and it is not receiving a message

[natanielfogiatto]

Here for me it keeps warning that Notification permission granted however, the whole page hangs, and the key does not appear... What can it be?

[FelipePereiradaSilva-qf]

code ok, token from user ok, test
message and nothing happens... Nofications allowed, windows notification ok, chrome ok... complicated

[VânNguyễn-bly]

Dạ chào anh, anh cho em hỏi xíu là em send noti thì nhận được thông báo với title là localhost, message là this site has been updated in the background. Em chưa biết mình sai ở đâu. Anh có thể xem giúp em được không ạ. Em cảm ơn ạ.

[johannesg.]

Doesn´t work... I get the token I can paste it into firebase but he notification doesn´t show up.