3. Push Notifications with Service worker: Creating the backend(NodeJS) app

Подписаться 1,4 тыс.

Просмотров 12 тыс.

50% 1

In this video, we use all the information from the previous video and implement the push-related APIs inside a nodeJS application. We then use the service worker to get the message sent from this backend(AKA the push message) and display it as a notification to the client.
This video series will take you through the fundamentals of Push notifications and how to implement a basic setup in your project.
Web Push notifications in Firefox: support.mozilla.org/en-US/kb/...
Github URL: github.com/AkileshRao/Service...
Playlist link: • Push Notifications usi...
⌚Timestamps
0:00 - Setting up application server key
2:31 - Sending the subscription instance to the backend
4:05 - Setting up the node(backend) app
5:55 - Save subscription API endpoint
7:07 - Sending a push message from the backend
14:11 - Getting notifications even when the app is closed
14:43 - Outro
🧑‍💻Other playlists:
Service worker in Javascript (2023) - • Service worker in Java...
Javascript observers(2023) - • Javascript Observers(2...
The Web components Playlist - • Web components 2023
The Git series(2023) - • The Git series(2023)
Multitasking in NodeJS - • Multi tasking in NodeJS
NodeJS Authentication with Passport - • NodeJS Authentication ...
Job scheduling in NodeJS - • Job scheduling in NodeJS
NPM Tutorial Series - • NPM Tutorial Series (2...
Javascript(Behind the scenes) - • Javascript(Behind the ...
Socials
🐤 Twitter - / themangalorian
📷 Instagram - / _alt.ar_
👔 LinkedIn - / akilesh-rao-610357137
🧑‍💻 GitHub - github.com/AkileshRao
📝 Medium - / akileshrao19
#serviceworkers #webworkers #pushnotifications #notifications

Наука

Опубликовано:

23 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 41

@samarthchouksey4460 12 дней назад

Thanks for making this! I was switching from one video to another until I found yours. You have covered all the basics in the best way possible. So many moving parts in this. Thanks for explaining each and every step! I am grateful to you for sharing your knowledge without any filter.

@redhood7105 7 месяцев назад

This is one of the most up-to-date and well-narrated series about web push notifications. The author clearly knows his sh*t.

@shafayetal-anik1005 6 месяцев назад

Really helpfull video. These 3 videos help me to understanding the push notification concept. I have already waste 3 days and couldn't sort it out but your 3 videos help me to solve my problem within 1 hour. Thanks❤

@webwisesagar 5 месяцев назад

Best resource out there. I integrated the push notification in a NextJS application by taking reference from your video. Excellent communication and explanation skills. Thankyou keep up the Good Work.

@akileshrao 5 месяцев назад

Appreciate it my man.

@johndowling1861 Месяц назад

well done on this one, really clearly explianed

@nikhilkumar-zz7ov 8 месяцев назад

Really helpful understanding how it works, thanks for the videos.I wanted to understand what's the difference between using third party providers like using firebase and doing our native way apart from pricing

@myokyawhtun 29 дней назад

You save the day... All the documentation from Mozilla and Google couldn't explain clearly like you

@mizanrifat 4 месяца назад

Nicely explained... good job ❤

@heysahilsingh 3 месяца назад

Smoothly explained 👍🏻

@akileshrao 3 месяца назад

Thank you 👍

@aryankalra5640 Месяц назад

Not all heroes wear capes

@Nice_in_Love 9 месяцев назад

Nice.. Good job.

@thechoosen4240 2 месяца назад

Nice teaching strategy, really enjoyed you teaching, keep it up bro.

@akileshrao 2 месяца назад

Appreciate it 🙌

@juancarloselorriaga6171 6 месяцев назад

Thanks for this awesome series! I guess the subscription will be updated at some point in time, or if more than one user connects from the same browser, so how can we update the subscription if the SW only runs once it’s registered? Or should it make a difference to register the sw on each page load?

@CoonJS 6 дней назад

Hello! Thanks for the video! How can I send notification only for special users (if they triggered some events: register, success subscription e,t,c). How to link userId and subscription object?

@mxo-jf6mx 5 месяцев назад

It is very good, thank you. one question. If the user manually deactivates and reactivates the notification permission, the notification will not be sent to him. What should be done in this case?

@bholaramseervi1985 10 дней назад

Great series for this push notification. I am not able to see the notification in chrome, though I am seeing the message (sent from the server ) is getting logged to console in push event oof the service worker. but its not showing on UI.

@shravankumarnalla3941 6 месяцев назад

7:11 XD btw thanks for the video, good explaination. Also please make a video on background data synchronisation using SW

@Currencies_ 5 месяцев назад

how do i get my own array buffon key, the steps is complicated after i pasted my public and private key

@guilhermecortes202 4 месяца назад

great video bro thanks, what about a video on how to get data from background PN and pass it to the application? It would be great, many thanks

@anim_ie 5 месяцев назад

@everyone can we use this for e-commerce application, after placing an order or cancelling order?

@programmersohel 4 месяца назад

It is necessary to establish communication between the client and the API. The API requires both the Private and the PUBLIC KEY, whereas the client only needs the PUBLIC KEY. The PUBLIC KEY represents the location where server notifications will be received by the client.

@jignalpatel2143 7 месяцев назад

I created a chat app and someone sent me a message my Chrome browser is closed I'm still able to receive a push notification using the service worker.

@Atifshaikh-xb4hw 6 месяцев назад

How creat backend app on google app script and sendNotification from this and save subscriber on google sheet it is posible ?

@jasonleelawlight 5 месяцев назад

Nice tutorial! Though it looks a bit odd to me that you have to pass the private key to the push service for chrome, to me this is like a compromise of security.

@Odidi_Bee6ix Месяц назад

Bow💯💯💯🔥🔥🔥

@dhananjayrakshe7655 6 месяцев назад

Hi buddy very nice video.. I want a list of that notification in my project so where I can click on bell icon and see all notification there. How can I do that can anyone give some reference or solution?

@gumnam4253 7 месяцев назад

but how can we do this on a live server ?

@rajusivananda 2 месяца назад

Thank you. you have explained it very well. I have a question, if the browser is closed how can we show the notification?

@akileshrao 2 месяца назад

This should answer your question. stackoverflow.com/a/39208140

@user-bv6oj6ur2v 9 месяцев назад

Hello sir, Please help me sir I want to background notification event i want please help sir

@AnsiString 8 месяцев назад

Very good video series. What about Safari on iOS? Does this method also work with PWAs on iOS and Android?

@akileshrao 8 месяцев назад

Service workers have good support for Safari, so technically it should work. There might be a few little tweaks in the implementation but most of it should be the same. PWAs again at the end of the day will depend on the browser because that's what the application will be running on. So if the browser supports the SW API well, it should work without any problems.

@shravankumarnalla3941 6 месяцев назад

will it work on node 18?

@akileshrao 6 месяцев назад

Yes it will