How to add Push Notifications to a Next.js App w/ Firebase Cloud Messaging! (Tutorial for Beginners)
10,849
Published 2024-07-04
🚨 Join the world’s BEST developer course & community “Zero to Full Stack Hero” NOW: www.papareact.com/course
🔴 LOOKING FOR THE CODE FROM MY OTHER BUILDS? 🛠️
links.papareact.com/github
Join me as I show you how to add & test Push notifications on iOS, Android, and Web Browsers such as Google Chrome and Safari using Firebase Cloud Messaging. You'll learn the following in this video:
👉 How to Implement Push Notifications on any Next.js App using Firebase Cloud Messaging (This configuration also lets you send iOS and Android notifications)
👉 What is Firebase Cloud Messaging and its Benefits
👉 Explaining how App States work for Notifications, such as foreground notifications (when the tab is open) and background notifications (when the tab/window is closed or out of focus)
👉 What are Service Workers & How to Implement and Debug them
👉 Explaining Firebase Cloud Messaging Best Practices
👉 How to add a toast Notification with ShadCn to handle foreground notifications
📩 WANT TO LISTEN TO THE EXCLUSIVE PAPAFAM PLAYLIST?
Sign up for the PAPAFAM Newsletter here 👉 links.papareact.com/newsletter
👇🏻FOLLOW ME HERE:
Instagram: links.papareact.com/instagram
Facebook: links.papareact.com/facebook
LinkedIn: links.papareact.com/linkedin
Twitter: links.papareact.com/twitter
Discord: links.papareact.com/discord
💰 WANT TO SUPPORT THE CHANNEL?
Donate here: links.papareact.com/donate
Grab some PAPAFAM Merch: links.papareact.com/merch
🕐 TIMESTAMPS:
00:00 Introduction
00:34 Push Notification in Firebase Cloud Messaging
01:16 Why Firebase Cloud Messaging
01:39 Explaining Firebase Cloud Messaging (1/2)
02:38 Firebase Cloud Messaging Message Types
03:20 Explaining Firebase Cloud Messaging (2/2)
03:42 Initialising the Build
04:32 Setting Up the Firebase Project
09:59 Firebase Cloud Messaging Demo
11:04 Setting Up a Messaging Campaign
14:56 Explaining App States for Notifications
16:11 What is a Service Worker?
16:40 How to Inspect & Debug a Service Worker
18:21 Purpose of Service Workers in Web Dev
20:02 Explaining How Background Messages Work
21:44 Explaining How a Service Worker Works
25:42 Implementing a Foreground State Toast Notification
32:17 Explaining the Functionality of the useFcmToken Custom Hook
50:17 Push Notification Demo for Foreground & Background App State
53:08 How & Why Tokens Are Saved to a Database
55:13 Firebase Cloud Messaging Best Practices
56:12 Summary
57:06 Join my course Zero to Full Stack Hero for more
57:55 Outro
Let’s get it PAPAFAM 🔥.
#nextjs #pushnotifications #firebase #ios #android #google #tailwindcss #typescript #testing #reactjs #javascript #nextjs15 #firebasecloudmessaging #fcm
All Comments (21)
-
❗Join Zero to Full Stack Hero for 50% off ( 48 HOUR INDEPENDANCE DAY SALE ) 👉www.papareact.com/course
-
Not all heroes wear capes. Sonny you’re a saviour. Thank you🙏🏾❤️❤️❤️👏🏾👏🏾👏🏾
-
That's a really long and excellent tutorial! :) Agree?
-
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?
-
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
-
Regular ❤🔥 tutorial Next.js app builds has been amazing! University of Code locked in and taking over keep it coming fam!
-
Thanks a lot for the tutorial, I needed something like this for a side project.
-
This is Amazing 🔥🔥
-
Thank you so much, i've been searching for a full tutorial for web push notification with fcm <3
-
Love it when you're doing it live😅
-
I'm thinking about web notification and see you are live with this ..love you brother ..❤❤❤❤
-
you always amaze me..i have been thinking about this and boom you demystifyied it .....big up bro
-
Thank you Sonny , God bless you ❤
-
wow , nice !!
-
Sonny sir me awaiting for React Native full stack projects plz plz make a project playlist just like Next js
-
Sonny is BACK!!
-
Sonny Max, Sonny Live, love ur content, bruh...
-
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.
-
Best ❤
-
Hey , thanks for this wonderful video , does it work with PWA ?
