How to add Push Notifications to a Next.js App w/ Firebase Cloud Messaging! (Tutorial for Beginners)

แชร์
ฝัง
  • เผยแพร่เมื่อ 13 ต.ค. 2024

ความคิดเห็น • 78

  • @SonnySangha
    @SonnySangha  3 หลายเดือนก่อน +3

    ❗Join *Zero to Full Stack Hero* for *50% off* ( _48 HOUR INDEPENDANCE DAY SALE_ ) 👉www.papareact.com/course

  • @agadaFrancisLouis
    @agadaFrancisLouis 3 หลายเดือนก่อน +10

    Not all heroes wear capes. Sonny you’re a saviour. Thank you🙏🏾❤️❤️❤️👏🏾👏🏾👏🏾

    • @SonnySangha
      @SonnySangha  3 หลายเดือนก่อน

      Appreciate you!

  • @tipssedlife
    @tipssedlife หลายเดือนก่อน

    Just copied and pasted into my client project and everything is working flawlessly. 🚀
    Thanks Sonny 💞

  • @BrutalInsights
    @BrutalInsights 3 หลายเดือนก่อน +2

    Regular ❤‍🔥 tutorial Next.js app builds has been amazing! University of Code locked in and taking over keep it coming fam!

    • @SonnySangha
      @SonnySangha  3 หลายเดือนก่อน +1

      You know it!!! The PAPAFAM is in full power!

  • @DigitalAlchemyst
    @DigitalAlchemyst 3 หลายเดือนก่อน +1

    Aww i missed this so much so that youtube showed it still live on the home page.
    This is good info I know it cant wait to watch

  • @mileslegend
    @mileslegend 3 หลายเดือนก่อน

    you always amaze me..i have been thinking about this and boom you demystifyied it .....big up bro

    • @SonnySangha
      @SonnySangha  3 หลายเดือนก่อน

      Appreciate you brother!!!

  • @SomtochiMkparu-i7o
    @SomtochiMkparu-i7o 3 หลายเดือนก่อน

    Thanks a lot for the tutorial,
    I needed something like this for a side project.

  • @MrJeRimes
    @MrJeRimes 3 หลายเดือนก่อน

    Thank you so much, i've been searching for a full tutorial for web push notification with fcm

    • @SonnySangha
      @SonnySangha  3 หลายเดือนก่อน

      You’re welcome!!

  •  3 หลายเดือนก่อน +4

    Great guide, thanks for putting this together! Notifications are sent twice though (13:05 in the video shows this). One of the notifs is rendered automatically by the browser. The other one is the service worker. Can the default browser notification be disabled?

    • @capturedbyjan
      @capturedbyjan 3 หลายเดือนก่อน

      +1

    • @AbhishekPatel7420
      @AbhishekPatel7420 หลายเดือนก่อน

      let me know if you have a fix. I'm yet to go through the codebase.

  • @manmittiwade
    @manmittiwade 3 หลายเดือนก่อน

    I'm thinking about web notification and see you are live with this ..love you brother ..❤❤❤❤

  • @proflead
    @proflead 3 หลายเดือนก่อน +1

    That's a really long and excellent tutorial! :) Agree?

  • @developmentwithtariq
    @developmentwithtariq 2 หลายเดือนก่อน

    Thank you for your great contribution in my life as a developer

  • @TheMrmancave
    @TheMrmancave 3 หลายเดือนก่อน +1

    Hi Sonny, are you able to send these push notifications to iPhones and Android devices with a Next.js app?

  • @PHCreatives-ge9hb
    @PHCreatives-ge9hb 3 หลายเดือนก่อน

    Love it when you're doing it live😅

    • @SonnySangha
      @SonnySangha  3 หลายเดือนก่อน

      A mix of both is perfect for all!

  • @annajezierska2622
    @annajezierska2622 2 หลายเดือนก่อน

    Excellent job!! Thanks a lot!

  • @eliuddyn
    @eliuddyn 3 หลายเดือนก่อน +1

    This is Amazing 🔥🔥

  • @mohitpatel713
    @mohitpatel713 9 วันที่ผ่านมา

    Please please please make a video on storing the tokens

  • @joaoalegria7578
    @joaoalegria7578 หลายเดือนก่อน

    If android and ios users have the browser closed they'll still receive the push notifications right? After allowing the notifications for the first time they open the app that is.

  • @usmanmarkaz
    @usmanmarkaz 3 หลายเดือนก่อน +1

    Sonny sir me awaiting for React Native full stack projects plz plz make a project playlist just like Next js

  • @johnedet4551
    @johnedet4551 3 หลายเดือนก่อน

    Also can you build an app, where an admin can send push notification to all his subscriber, whose tokens have been saved to the db. This would be a nice feature in an app.

  • @augustineudeh1584
    @augustineudeh1584 3 หลายเดือนก่อน

    Thank you Sonny , God bless you ❤

    • @SonnySangha
      @SonnySangha  3 หลายเดือนก่อน

      Thank you for supporting!!!

  • @Soap_js
    @Soap_js 3 หลายเดือนก่อน

    Sonny is BACK!!

    • @SonnySangha
      @SonnySangha  3 หลายเดือนก่อน

      Yessssir!!!

  • @juanpablocs21
    @juanpablocs21 3 หลายเดือนก่อน

    great job. one question, this fcm is working in ios chrome?

  • @INAMULHASAN-d5h
    @INAMULHASAN-d5h 3 หลายเดือนก่อน

    Hey , thanks for this wonderful video , does it work with PWA ?

    • @capturedbyjan
      @capturedbyjan 3 หลายเดือนก่อน

      of course, yes

    • @INAMULHASAN-d5h
      @INAMULHASAN-d5h 3 หลายเดือนก่อน

      @@capturedbyjan thanks for the answer

  • @wafiqhosain5713
    @wafiqhosain5713 3 หลายเดือนก่อน

    Sonny Max, Sonny Live, love ur content, bruh...

  • @anshsingh03
    @anshsingh03 3 หลายเดือนก่อน

    Amazing video......
    I need your help regarding notification in Safari......

    • @SonnySangha
      @SonnySangha  3 หลายเดือนก่อน

      Ask away, ideally in www.universityofcode.com

    • @anshsingh03
      @anshsingh03 3 หลายเดือนก่อน

      ​@@SonnySangha thanks

  • @Deus-lo-Vuilt
    @Deus-lo-Vuilt 3 หลายเดือนก่อน

    wow , nice !!

  • @stroverbg
    @stroverbg 2 หลายเดือนก่อน +1

    This code is not working for push notifications on android device with chrome browser specifically

  • @dariod7322
    @dariod7322 3 หลายเดือนก่อน

    Can I do this using plain react and js? I don't know typescript and nextJs yet.

    • @SonnySangha
      @SonnySangha  3 หลายเดือนก่อน

      Ofcourse you can!

  • @amyp777
    @amyp777 หลายเดือนก่อน

    My friend changed his name as well and he has heard testimonies too❤

  • @johnedet4551
    @johnedet4551 3 หลายเดือนก่อน +1

    This doesn't work on safari.. You have any reason why?

  • @ninoaarondacua5975
    @ninoaarondacua5975 3 หลายเดือนก่อน

    is this working in vercel?

  • @talhaboyraz
    @talhaboyraz 3 หลายเดือนก่อน +1

    not working on ios. is there any way to chrome push notification on ios.

    • @CaseStudyQB
      @CaseStudyQB หลายเดือนก่อน

      I would like to know an answer to this as well

  • @CYCLONE_2XL
    @CYCLONE_2XL 3 หลายเดือนก่อน

    Best ❤

    • @SonnySangha
      @SonnySangha  3 หลายเดือนก่อน +1

      Thanks for the support!

  • @salyiohh
    @salyiohh 3 หลายเดือนก่อน

    we need this for react native expo project

    • @SonnySangha
      @SonnySangha  3 หลายเดือนก่อน

      I hear you!

  • @bernardyamoah1284
    @bernardyamoah1284 3 หลายเดือนก่อน

    💯💯😊

    • @SonnySangha
      @SonnySangha  3 หลายเดือนก่อน +1

      Appreciate you!

  • @cardiderek
    @cardiderek หลายเดือนก่อน

    not working on safari for me

  • @HKML629
    @HKML629 3 หลายเดือนก่อน

    Hello my Boss

    • @SonnySangha
      @SonnySangha  3 หลายเดือนก่อน

      Yo!!!! Enjoy the vid bro!

    • @HKML629
      @HKML629 3 หลายเดือนก่อน

      @@SonnySangha Sure Brother

    • @HKML629
      @HKML629 3 หลายเดือนก่อน

      @@SonnySangha I really learn alot from you i wants to show to you a project i've made to hear your insights

    • @SonnySangha
      @SonnySangha  3 หลายเดือนก่อน

      Join the university of code Skool community and share inside! Www.universityofcode.com

    • @HKML629
      @HKML629 3 หลายเดือนก่อน

      @@SonnySangha I do join now

  • @aakash8010
    @aakash8010 3 หลายเดือนก่อน

    😘😘🤩😍🥰😇

  • @kwamenadadson
    @kwamenadadson 3 หลายเดือนก่อน +1

    please can i get the source code

    • @SonnySangha
      @SonnySangha  3 หลายเดือนก่อน

      First link in description!

    • @kwamenadadson
      @kwamenadadson 3 หลายเดือนก่อน

      @@SonnySangha Thanks but now only the foreground works without the background

    • @SonnySangha
      @SonnySangha  3 หลายเดือนก่อน

      Need to run in HTTPS to register the service worker, check your package JSON and enable experimental-https flag

  • @adloukondo2148
    @adloukondo2148 3 หลายเดือนก่อน

    Salut, ttu peux nouus aider avec un tutoriel OTP. avec firebase +nextjs

    • @SonnySangha
      @SonnySangha  3 หลายเดือนก่อน

      Salut, Ofcourse I’m on it!

    • @adloukondo2148
      @adloukondo2148 3 หลายเดือนก่อน

      @@SonnySangha Merci beaucoup papa react 💖💖

  • @rodrigoquintero3855
    @rodrigoquintero3855 22 วันที่ผ่านมา

    y el repo?!?!?!?!?!... no me voy a comer una hora de video!!!!... larga el repo de una vez!... una hora man!!!!, una hora de video!, te falto ponerte a bailar nomas

  • @flutter-fm1kl
    @flutter-fm1kl 3 หลายเดือนก่อน

    No one use RN😂

  • @suchitraswain1525
    @suchitraswain1525 3 หลายเดือนก่อน

    it's not working on the hosted URL, is there anything we need to config?

    • @SonnySangha
      @SonnySangha  3 หลายเดือนก่อน

      I can’t help with this much information… it does work!

    • @SuchitraSwain-o4y
      @SuchitraSwain-o4y 3 หลายเดือนก่อน

      @@SonnySangha I hosted in firebase hosting using functions it's showing 500 error