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

Sonny Sangha

2024. 7. 4.

Free GitHub Source Code: 👉 https://www.papareact.com/fcm-code 🚨 Join the world’s BEST developer course & community “Zero to Full Stack Hero” NOW: https://www.papareact.com/course 🔴 LOOKING FOR THE CODE FROM MY OTHER BUILDS? 🛠️ https://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 👉 https://links.papareact.com/newsletter 👇🏻FOLLOW ME HERE: Instagram: https://links.papareact.com/instagram Facebook: https://links.papareact.com/facebook LinkedIn: https://links.papareact.com/linkedin Twitter: https://links.papareact.com/twitter Discord: https://links.papareact.com/discord 💰 WANT TO SUPPORT THE CHANNEL? Donate here: https://links.papareact.com/donate Grab some PAPAFAM Merch: https://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

Recommanded Videos

2024 09 09 개발자 상담소

[2024 NEW] 코드팩토리 NestJS MSA 강의 https://bit.ly/fcnestjs [코드팩토리 통합링크] https://links.codefactory.ai [강의] 플러터 초보강의 https://bit.ly/3tflvR6 [강의] 플러터 중급강의 https://bit.ly/3PKecdl [강의] 코드팩토리 카카오 오픈톡 https://bit.ly/cfkakao [서적] Must Have 코드팩토리의 플러터 프로그래밍 https://bit.ly/3YsyduB

2024. 9. 9.

How To Develop 2 AI Apps in 10 Minutes!

You don't have to pay to try out building apps that use AI. With Ollama you can run AI models locally, for free. Vercel's AI library makes it easy to manage chats and stream back messages to the client. And you can use any server you want, like NextJS, Astro and more. Code: https://github.com/jherr/cheap-ai 👉 Upcoming NextJS course: https://pronextjs.dev 👉 Don't forget to subscribe to this channel for more updates: https://bit.ly/2E7drfJ 👉 Discord server signup: https://discord.gg/ddMZFtTDa5 👉 VS Code theme and font? Night Wolf [black] and Operator Mono 👉 Terminal Theme and font? oh-my-posh with powerlevel10k_rainbow and SpaceMono NF 00:00 Introduction 00:57 Building An AI Chatbot 03:25 Building Out The Chat UI 05:10 Creating The AI Endpoint 07:48 Building An AI Photo Reviewer 11:22 Outroduction

2024. 7. 22.

오픈소스 LLM으로 RAG 시스템 만들기

오픈소스 LLM으로 RAG 시스템을 만들어봅니다. Colab 링크: https://colab.research.google.com/drive/1nSku6o3uGvSVNO28VivwVnQ5tuVAsBZZ?usp=sharing

2023. 12. 30.

Do You Know How Mobile Apps Are Released?

Get a Free System Design PDF with 158 pages by subscribing to our weekly newsletter: https://bytebytego.ck.page/subscribe Animation tools: Adobe Illustrator and After Effects. Checkout our bestselling System Design Interview books: Volume 1: https://amzn.to/3Ou7gkd Volume 2: https://amzn.to/3HqGozy The digital version of System Design Interview books: https://bit.ly/3mlDSk9 ABOUT US: Covering topics and trends in large-scale system design, from the authors of the best-selling System Design Interview series.

2024. 5. 23.

Next.js & Supabase Tutorial - Shadcn Ui 라이브러리를 활용한 퍼블리싱 2

#nextjs #react #supabase 안녕하세요, '구디사는 개발자 9Diin' 입니다. 드디어 오래기다려주셨던 Next.js 강의를 오픈하였습니다. 그동안 많은 관심을 가져주신 구독자 여러분! 진심으로 감사드립니다. 양질의 콘텐츠로 찾아뵙도록 하겠습니다. 이번 Next.js 강의도 준비를 많이 했으니 저와 함께 포기하지 말고, 끝까지 완성시켜보셨으면 좋겠습니다. 늘 부족하지만, 이번에도 미약하게 나마 도움이 되셨으면 좋겠습니다. 화이팅! 📌 강의 문의 : alienstyle@naver.com 📌 블로그 : https://blog.naver.com/weartstudio/223466380707 📌 깃허브 : https://github.com/daffy3

2024. 6. 10.

Qwen2-VL (2B, 7B, 72B) : The Best OPENSOURCE VISION LLM till date! (Beats Claude & GPT-4O)

Join this channel to get access to perks: https://www.youtube.com/@AICodeKing/join In this video, I'll be fully testing the New Qwen-2 Vision Models (2B, 7B, 72B) to check if it's really good. I'll also be trying to find out if it can really beat Llama-3.1, Claude 3.5 Sonnet, GPT-4O, DeepSeek & Qwen-2 in vision and language tests. Qwen2-VL (Vision) model is fully opensource and can be used for FREE. Qwen2-VL (Vision) is even better in Coding Tasks and is also really good at doing Text-To-Application, Text-To-Frontend and other things as well. I'll be testing it to find out if it can really beat other LLMs and i'll also be telling you that how you can use it. ----- Key Takeaways: 📸 Alibaba’s Qwen-2 Vision Language Models are HERE! Discover how the latest Qwen-2 VL 2B, 8B, and 72B models revolutionize visual understanding and AI benchmarks! 🚀 State-of-the-Art Performance in AI! The Qwen-2 VL models achieve top scores on visual benchmarks like MathVista and RealWorldQA—beating GPT-4 and Claude 3.5 across the board! 🧠 Multimodal Mastery: The Qwen-2 VL models excel at video-based question answering, content creation, and multilingual support. Perfect for creators and developers! 🔓 Open-Source Power! The Qwen-2 VL 2B and 8B models are open-sourced under Apache 2.0, making them free for personal and commercial use—unlock their full potential! 🎥 Video Summarization & More! These models can process and summarize long videos, making them ideal for content creators looking to enhance their workflows. 🛠️ Try the 72B Model Now! Available on Hugging Face Spaces, the powerful 72B model is just a click away. Experience the future of AI vision models today! 💡 AI for the Future: With innovative architecture, Qwen-2 VL is setting new standards in AI. Stay ahead by exploring these cutting-edge models and see why they’re a game-changer! ----- Timestamps: 00:00 - Introduction 00:08 - About New Qwen-2 VL (Vision) Model 02:58 - Testing 06:30 - Conclusion 07:29 - Ending

2024. 8. 31.

로딩 중...