This is why you'll want the Notifications API
Vložit
- čas přidán 1. 02. 2024
- My Courses
📘 T3 Stack Tutorial: 1017897100294.gumroad.com/l/j...
My Products
📖 ProjectPlannerAI: projectplannerai.com
🤖 IconGeneratorAI: icongeneratorai.com
📝 ThumbnailCritique: thumbnailcritique.com
Useful Links
💬 Discord: / discord
🔔 Newsletter: newsletter.webdevcody.com/
📁 GitHub: github.com/webdevcody
📺 Twitch: / webdevcody
🤖 Website: webdevcody.com
🐦 Twitter: / webdevcody
arrow in thumbnail www.vecteezy.com/free-vector/... - Abstract Vectors by Vecteezy
Nice video Cody! Another improvement could be using service worker to send the notification when the site is not opened in any of the tabs.
That's really neat 😮
Mann, I've been looking for this implementation for a long time. You are life saver.
Thanks for great content. Always on time when in my project simillar feature is planed after several sprints. I'm amazed
Bro your video ideas look real world and that's awesome ❤️
as always, short video straight to the point and we learn smth new ❤
I was about to sleep now i want to build this notification in my next app as well. Good night cody!
Good job babe!!! ❤
The problem with a lot of these solutions is that a user must grant permissions. And almost nobody does that. Everyone is too scared from years of website spamming and popups
Agreed... I don't think I ever allowed any site ever to give me notifications 😂
well, then in that case I guess a user wouldn't find this web application as useful if they disable all their notifications. If you're using a web application that has built in notifications, I'm not sure why you'd disable alerts for the website to hinder your own user experience.
@@WebDevCody because most web apps don’t have this. It’s such a foreign concept. Whenever that ugly looking permission dialog pops up in chrome users are trained to just dismiss it. I think most people are trained to receive realtime updates and notifications in a different way. For example a bell icon that highlights and when you click it a drawer slides out with your notifications. Basically a notification drawer….
In past experience, I've made notifications opt-in when a user clicks a button about enabling said feature. If they've rejected the permissions previously I show a little modal explaining how to grant the permissions.
Gives the user a bit more confidence in the purpose of the notifications, too often sites are just using it for marketing spam.
Thumbnails on fire dude 🔥 thnx for the vid
thanks man
I noticed that Notification constructor supports "icon" and "badge" properties along with "image". One of those two might actually allow you to replace the notification image so you can try. I never used the API myself. Looking at MDN, "icon" seems to be the most supported property, "badge" less supported and "image" is actually marked as an experimental API.
my 5 min well spent.
knowledge = knowledge + new Knowledge(Browser Notification API)
memory saved.
How did you get so good at design? I'm really really bad, and I know you used ShadCN, but are you required to sort of "come up" with the UI's you build at work? (and hence got better at that through rough repetition) Or do you do low fidelity sketches on paper or excalidraw etc?
I recommend Refactoring UI book. It's an easy read and pretty straightforward for developers. You'll not learn everything but it's a good start. Also spend some time looking into good UI, with time you develop a "feeling" of what to do.
Will do! is "Good UI" a book/course or did you just mean UI that is good?
@@gabrieldavid15
Dont worry, I have designers on my team, and when new UI is needed, they just go to look at websites(to competitors) for "inspiration" 💅
As far as I understand, this is best practice in design world
Hosna, another youtuber I'm working on this with, is the one does most of the design improvements. We often start with the default shadcn components, but then we'll come through and improve them as needed after we've used the application a bit and find areas that could be improved. A lot of design comes from looking at other online services and taking the best from each one.
You can also use FCM for notifications. And it's free. Great vid btw.
Cool. Will tinker with it when i make my app pwa
dude you made me a better dev, thx
Hey Cody! Any chance we could get a "system design" type video like normal but about the Teams functionality? I'd be nice to see how you implemented it! Did you keep the same page code to work with individuals + teams or use separate, things like that! Great video though :)
Could you do video on the organization/team setup and system design
Could you make a video showing all your extensions?
and what about the firebase messaging and the service workers i dont understand that
Hey Cody(or anyone else), when your in the workforce like this, is building projects still a great way to improve? Or should efforts be more focused towards the job?
building larger projects is always been a great way to improve. sometimes just tinkering on smaller things to learn new tooling is important as well.
Do you really use it anywhere, on any other website?
I do not know a single person using it.
As I know it all websites have trained us to always press ignore/disallow them.
I use it on any website that is actually related to my real work; but any random site that asks for notifications randomly, no. For example, slack web, discord web, yes I'd turn that on.
@@WebDevCody
Ah... I remember now.
I disabled notification completely.
So that websites do not even have the capability to ask.
I can enjoy peace and quite and completely forget that they even exist.
If I understood correctly, you added your function in your "main" layout.tsx. I saw you used a useEffect, does that mean you have a "use client" at the very top and it converts your whole application to client side rendering ?
When saying render the children inside a client layout and the children are server side component they act as a server side component but if you render them inside the layout like this it'll act as a client component
@@younesessaadani9303 Not sure i could understand your point. Do you have documentation on this subject ?
yes, there is a use client at the top of that layout. This is a nested layout, and no it won't convert your entire application to client side rendering. Btw you can pass RSC into a client component if you want so that the RSC still renders on the server.
@@WebDevCody Thanks for clarifications, the next documentation lacks a bit of practical examples. I thought everything contained in a client component was converted to client side rendering as stated in the doc (This means that by defining a "use client" in a file, all other modules imported into it, including child components, are considered part of the client bundle.) With both of your explanations I understand now how RSC could be passed to a client component !
is this part of a bigger playlist of a project? can’t find it
nope
Take a look at service workers and the WebPush protocol, so you can do notifications even if page isn't open.
That’s cool, but that feels like something that would really annoy users maybe? If I’ve closed chrome I wouldn’t except notifications
@@WebDevCody I agree, I'll never enable it on sites unless I get value form it, far too many sites use it for spammy marketing. I just mean it might be neat to take a look at it, some users may find it useful. I certainly found it fun to play around with!
i thought using WebPush protocol with service worker is one of the way to implement push notifications to user devices when they use their mobile device. (like when you exported to PWA).
is that right?
@@user-cv6kf4bk1q Yup you could totally take that approach, but also it's not a hard requirement since most browsers will always have a process running in the background which means the service worker can still receive the notifications.
So it could still be just a standard website on either desktop or mobile and have notifications when the page isn't open.
Awesome stuff. A small concern is that users can spam the notification mutation.
I mean the user needs access to the plan to create messages, and I do have some backend logic which adds padding to the lastRead timestamp so that you have to wait X amount of seconds before it'll show a notification again
@@WebDevCody oh I was actually referring to the database write of lastread
@@WebDevCodyyou update lastread everytime they view the messages page so multiple requests equals multiple writes or I'm I missing something 🤔
You are using real-time db for messages?
yes
How do I keep the sockets running even when the tab or browser is closed and receive notifications?
That might need service workers?
Thank you so much. This solution just didn't come to my naive mind . Love from India ❤
Take a look at the Web Push protocol and Service workers
This works only if your app is open.
Sir what's your vs theme ?
Bearded theme stained blue
@@WebDevCody Thank you Sir, I'm currently 2nd year college learning about programming thank you
Great video