Send PUSH Notifications to Flutter Apps With Supabase Edge Functions & FCM
Vložit
- čas přidán 27. 07. 2024
- This is wow to send push notifications to your Flutter apps using Supabase Edge Functions and FCM - a complete guide.
Push notifications are an essential part of mobile app development. In this video, Tyler will takes us through how to use FCM with Supabase to send push notifications to your Flutter apps. The app will work by first inserting a new row into the database, which triggers a database web hook, which calls an edge function. The edge function then calls the FCM API which sends the push notification.
👇LINKS YOU NEED:👇
- Send FCM using Supabase guide → supabase.com/docs/guides/func...
- Supabase Flutter library reference → supabase.com/docs/reference/d...
- Supabase Edge Functions Guide → supabase.com/docs/guides/func...
CHAPTERS:
00:00 Intro
00:14 Going through the demo app
01:40 Going through the database schema
02:16 Why FCM
03:00 Connect Firebase to the app
06:15 Setup FCM in the Dart code
09:00 Manually send a test FCM message
10:26 Create a Supabase Edge Function to send FCM
18:24 Setup Database webhooks to call the function
18:49 Test and re-deploy the function with --no-jwt flag
19:29 Test again and fix typo in the Edge function
20:09 Successfully send push notification to the app
20:52 Outro
💻 Videos to watch next:
▶ Build a SaaS with Supabase in minutes: • Fastest way to build a...
▶Watch all Supabase Flutter tutorials: • Getting Started with F...
▶ Create a Figma clone app with Supabase in seconds: • Draw and sync canvas i...
▶ Supabase real-time with Flutter: • Listening to real-time...
👇 Learn more about Supabase 👇
🕸 Website: supabase.com/?...
🏁 Get started: app.supabase.com/?...
📄 Docs: supabase.com/docs?...
🔔 Subscribe for more tutorials and feature updates from Supabase: / @supabase
📱 Connect with Us:
🐙 Github: www.github.com/supabase?...
💬 Discord: www.discord.supabase.com/?utm...
🐦 Twitter: Twitter: supabase/?utm...
📸 Instagram (follow for memes): / supabasecom
ABOUT SUPABASE:
Supabase is the open source Firebase alternative. Supabase provides a full Postgres database for every project with pgvector, backups, realtime, and more. Add and manage email and password, passwordless, OAuth, and mobile logins to your project through a suite of identity providers and APIs.
Build in a weekend, scale to millions.
#Supabase #AppDevelopment #RealtimeApps #DeveloperTools - Věda a technologie
Works great, Supa!
The tutorial i was waiting for thank you.
Amazing and quite informative. Thank you 🙏🔥.
I was searching it today,
Thanks a lot!!!
Me too😅
Such an amazing video 🤩
Let us know in the comments what other Flutter content you would like to see!
Great tutorial, I'm going to use this to notify users for new chat message. My question is, what's the best way to prevent notifications when both users chat screen are on foreground?. I can store both user ids in a table and check or is there much better way of doing this using trigger/edge function? Thank you.
Thanks! Glad you liked the tutorial! You can use the setForegroundNotificationPresentationOptions option on your Flutter app. Using that setting, you can control whether to show or not show the notification when the app is in the foreground!
@@Supabase Thank you 🙏
What's the best way to use transactions in supabase flutter
@@aniketkhote9 You would want to create a database function to perform transaction in Supabase!
Excellent video! got it working except the jwt but it's great anyway! thanks ;)
This content has been very helpful. However, I switched from Firebase to Supabase due to the simplicity of Supabase. I don't find going back to Firebase appealing. I hope that someday Supabase alone will be sufficient for my needs
That would be certainly a dream come true 🙌 We sincerely hope that we can bring that day!
The problem is that for notifications, it is mandatory. The Android operating system is a product of Google.
Hey thanks for the awesome tutorial will this be any different if instead of flutter we are using android studio
The server-side code should actually be the same as long you are using FCM to send push notifications, so you could use the same code for any kind of iOS, Android, or web development!
Does this mean notifications are set up for android as well? Or is this just an ios tutorial?
when will notifications be a feature in supabase. I really don't want to load firebase at all.
Supabase providing push notification service would certainly be a dream come true, but as explained in the video, currently FCM is a requirement for sending notifications to Android, so there is no escaping Firebase at least for Android apps.
Been playing around with this and even learned some TS ......Can you make a tutorial on how to list a Value change on a specific column or row.....ex: Order status value changed on the database.....the way it is now...anything that changes triggers a notification but most cases you would like to send specific notification on specific instances. (FOR FLUTTER)......
So you want to send push notifications to your users only when certain conditions are met, correct? You could have all the logic to check if the condition is met within your edge functions, and make it so that the notifications are sent only when the condition is met by using a simple if statement!
Hi, Pretty much ...picture this "Trigger a notification when there is a value change on a specic column of current user row"........A good reference would be "Order status from ordered to Preparing to Ready to shipped" for every status change the user is notified of the progress so he can check@@dshukertjr
Could you please make more content about flutter with supabase?
Thanks for the request! Will do!
@@Supabase 🙏🏻🙏🏻🙏🏻🙏🏻🙏🏻🙏🏻
How do I automate a function to run every day? For example, I want every day at a certain time, each user to receive N notifications about their reminders. If a user has 5 reminders on the 10th, they will receive 5 notifications that day.
You could combine the edge functions with pg_cron to do that! supabase.com/docs/guides/database/extensions/pg_cron
Hello. I found an error in the Supabase documentation. The part "payload.record.profile_id" should be changed to "payload.record.user_id." I hope this small contribution is helpful for the excellent Supabase :)
Thanks for letting us know, and sorry it took so long to come back to you. We will fix it soon!
Can You please upload tutorial on FCM with Android Kotlin.
Thanks for the request! Will add it to the list!
link to source to scan though would be nice. thx
Apologies for the delay. Here is a written tutorial covering how to sent FCM from using Supabase. supabase.com/docs/guides/functions/examples/push-notifications?platform=fcm
Would it be a problem if a user could have multiple tokens to be able to manage multiple devices per user?
No, not at all! You would just create a `tokens` table that is associated to the users table in a one-to-many relationship!
@@Supabaseexcellent, thank you!!
❤❤❤🎉💪
Is the video available on the website to read through?
I couldn't make it in time, but coming up! Will share it here once it's ready.
@@dshukertjr very nice, thanks!
Apologies for the delay. Here is a written tutorial covering how to sent FCM from using Supabase. supabase.com/docs/guides/functions/examples/push-notifications?platform=fcm
very nice, thanks! @@Supabase
I am getting
Error: Not implemented: crypto.Sign
at notImplemented
when running the same
Could you confirm that you are using the latest version of Supabase CLI?
i hope there is an android version tutorial for this
The Edge function setup would be the same for all platforms. You just have to add FCM to your respective platform!
Wonderfull ! Thanks @dshukertjr
How can push notifications just for specific users depends on their category ? Users with the same category than the post, will receive the notification when post added.
You could use the topic feature of FCM to send push notifications to users with certain categories! firebase.google.com/docs/cloud-messaging/flutter/topic-messaging
Please add chapters to this video so that it is easier to refer. Thanks.
Done 🙌
@@SupabaseDamn, that was fast. Thanks 😁
algo asi para React Native?
Would this be what you are looking for? czcams.com/video/xYRbYG77M_o/video.html
Here is a React Native version of this video! czcams.com/video/xYRbYG77M_o/video.html