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

Поделиться
HTML-код
  • Опубликовано: 6 окт 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 месяца назад +9

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

  • @tipssedlife
    @tipssedlife 23 дня назад

    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

  • @proflead
    @proflead 2 месяца назад +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

  • @manmittiwade
    @manmittiwade 3 месяца назад

    I'm thinking about web notification and see you are live with this ..love 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

  •  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?

  • @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!!!

  • @mohitpatel713
    @mohitpatel713 2 дня назад

    Please please please make a video on storing the tokens

  • @usmanmarkaz
    @usmanmarkaz 3 месяца назад +1

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

  • @PHCreatives-ge9hb
    @PHCreatives-ge9hb 3 месяца назад

    Love it when you're doing it live😅

    • @SonnySangha
      @SonnySangha  3 месяца назад

      A mix of both is perfect for all!

  • @TheMrmancave
    @TheMrmancave 2 месяца назад +1

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

  • @eliuddyn
    @eliuddyn 3 месяца назад +1

    This is Amazing 🔥🔥

  • @stroverbg
    @stroverbg 2 месяца назад +1

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

  • @annajezierska2622
    @annajezierska2622 2 месяца назад

    Excellent job!! Thanks a lot!

  • @johnedet4551
    @johnedet4551 2 месяца назад

    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!!

  • @talhaboyraz
    @talhaboyraz 2 месяца назад +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

  • @johnedet4551
    @johnedet4551 2 месяца назад +1

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

  • @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

  • @wafiqhosain5713
    @wafiqhosain5713 3 месяца назад

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

  • @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.

  • @amyp777
    @amyp777 Месяц назад

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

  • @Deus-lo-Vuilt
    @Deus-lo-Vuilt 2 месяца назад

    wow , nice !!

  • @juanpablocs21
    @juanpablocs21 3 месяца назад

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

  • @salyiohh
    @salyiohh 3 месяца назад

    we need this for react native expo project

  • @INAMULHASAN-d5h
    @INAMULHASAN-d5h 3 месяца назад

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

  • @ninoaarondacua5975
    @ninoaarondacua5975 2 месяца назад

    is this working in vercel?

  • @dariod7322
    @dariod7322 3 месяца назад

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

  • @cardireddigits
    @cardireddigits 25 дней назад

    not working on safari for me

  • @CYCLONE_2XL
    @CYCLONE_2XL 3 месяца назад

    Best ❤

    • @SonnySangha
      @SonnySangha  3 месяца назад +1

      Thanks for the support!

  • @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 💖💖

  • @bernardyamoah1284
    @bernardyamoah1284 3 месяца назад

    💯💯😊

  • @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 месяца назад

    😘😘🤩😍🥰😇

  • @flutter-fm1kl
    @flutter-fm1kl 3 месяца назад

    No one use RN😂

  • @rodrigoquintero3855
    @rodrigoquintero3855 15 дней назад

    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

  • @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